Jump to content


Photo
- - - - -

Branding Header Padding Remove & Centre Navigation

Padding Centre Branding Centre Brand Nav Padding

Best Answer sladestudios , 26 May 2013 - 11:52 AM

Thanks that works great.

 

Thanks again for everyone's help on this.

Jacqui

Go to the full post


  • Please log in to reply
9 replies to this topic

#1 sladestudios

sladestudios

    Member

  • Members
  • 14 posts
  • Country: Country Flag

Posted 24 May 2013 - 12:41 PM

Hello, I'm looking for help with the top Brand Nav Section of this site.

Please Login or Register to see this Hidden Content

 

I need to have the main logo centred and all the header section in the yellow band.

At the moment I can't seem to remove the padding from around the main logo.

It is showing a white panel on the left side.

 

I'm very new to CSS so need help please, after going through the forums I have used the following CSS

 

#branding .section-branding .content-pad {padding:0;}
 

And it does nothing

I also have added

 

 .section-brandnav .mainlogo-link img {max-width: 103%;}

max-width:100% leaves me with white on the right side also so adjusting this to 103% seemed to help. But increasing this didn't change it further.

 

I've tried inspecting with Chrome inspect tool and can't seem to find how to fix it.

 

Also I need to centre the Navigation and extend to the width of the page 900px. With the menus evenly spaced or centred in this space. At the moment I'm stuck with it being right aligned.

I tried the Sexy Snips but it doesn't work though I did succeed with the code they suggested to make the font bold for the navigation.

 

Thanks, Jacqui

 

 



#2 batman

batman

    Bat Learning

  • Members

  • 2056 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 24 May 2013 - 05:13 PM

Hi jacqui

Please, you can try add in

PageLines > Site Options > Custom Code > CSS Rules

or in

Pagelines Customize (plugin)

 

white panel on the left side.

.section-brandnav .mainlogo-link {  padding: 0px !important ;}

 

center de Navigation

#brandnav .brandnav-nav { margin-right: 100px;}

 

My exemplary code is not necessarily applicable as written, to your site, so please adjust accordingly.

 

It is advisable to learn how to do this on your own too.  

Check out 

Please Login or Register to see this Hidden Content

 

If you need more CSS help, make sure you've downloaded Firebug for Firefox

and check out W3 Schools for more info. 

Please Login or Register to see this Hidden Content

 

 



#3 sladestudios

sladestudios

    Member

  • Members
  • 14 posts
  • Country: Country Flag

Posted 24 May 2013 - 08:46 PM

Fantastic both those worked! Thank you.

 

Is there a way to extend the length of the nav bar so it reaches the full length of the page content area?

 

Thanks Jacqui



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 24 May 2013 - 10:11 PM

Hi there, you can remove the padding in the content-pad for the nav which will extend the width to the full content-area.

 

Please Login or Register to see this Hidden Content



#5 sladestudios

sladestudios

    Member

  • Members
  • 14 posts
  • Country: Country Flag

Posted 25 May 2013 - 05:34 AM

Thanks James, I'm now getting a fullwidth white panel behind the Nav Bar. Can I make the white area grey?

its actually the Brand Nav bar on this site 

Please Login or Register to see this Hidden Content

 

not the sladestudios site. I found I had a top-margin on it, taking that off  helped not sure the content-pad did. Though I think I"m having a padding issue again now.

Just can't see where. 

 

Can you help further please?

 

I am using the Brand Nav bar not the classic nav bar does this matter?

 

Ultimately I'd like the light grey bar of the nav to extend to the full width of the page with the items centred so if a new menu is added it is still centred evenly.

I currently have a #brandnav .brandnav-nav { margin-right: 100px;} which is centring it I can live with that if I have to but I need the white area to be grey.

 

Thanks. Jacqui



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 25 May 2013 - 02:09 PM

Hi Jacqui,

 

Do you use Firebug for Firefox or Chrome's Inspection Tool?  These are invaluable assets in dealing with CSS and I highly recommend using one of them routinely.

 

The CSS (found in a moment or two with Firebug) and adapted is below. I used the color silver, but you can change that to a hex color like #e7e7e7.

Please Login or Register to see this Hidden Content

Paste it into Dashboard > PageLines > Site Options > Custom Code > CSS Rules and you'll see results on saving.



#7 sladestudios

sladestudios

    Member

  • Members
  • 14 posts
  • Country: Country Flag

Posted 25 May 2013 - 09:20 PM

Thanks Rob that worked! I'm using Chrome inspect tool but will try again with Firebug as I want to be able to do this type of thing myself.

 

One last question is there a way of spreading the menu items along the bar as well?

 

Thanks again,

Jacqui



#8 batman

batman

    Bat Learning

  • Members

  • 2056 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 25 May 2013 - 09:59 PM

Hi jacqui

You can try modify de padding with:

 

 

ul.sf-menu li a {padding: 10px 22px;}


#9 sladestudios

sladestudios

    Member

  • Members
  • 14 posts
  • Country: Country Flag

Posted 26 May 2013 - 11:52 AM   Best Answer

Thanks that works great.

 

Thanks again for everyone's help on this.

Jacqui



#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 26 May 2013 - 01:44 PM

Happy to have helped! Glad it all worked!







Also tagged with one or more of these keywords: Padding Centre Branding, Centre Brand Nav, Padding