Archived

This topic is now archived and is closed to further replies.

  • 0

Branding Header Padding Remove & Centre Navigation


Question

Posted · Report post

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

http://www.effectivepeoplegroup.com.au/group/

 

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

 

 

Share this post


Link to post
Share on other sites

9 answers to this question

Posted · Report post

Thanks that works great.

 

Thanks again for everyone's help on this.

Jacqui

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

Hi jacqui

You can try modify de padding with:

 

 

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

Share this post


Link to post
Share on other sites

Posted · Report post

Happy to have helped! Glad it all worked!

Share this post


Link to post
Share on other sites

Posted · Report post

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 

http://support.pagel...ion/custom-css/

 

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

and check out W3 Schools for more info. 

http://www.w3schools.com/

 

 

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

 

http://screencast.com/t/3nckpymotS1

Share this post


Link to post
Share on other sites

Posted · Report post

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 http://www.effectivepeoplegroup.com.au/group/

 

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

#brandnav .content .content-pad {
    background: none repeat scroll 0 0 silver;
    padding: 0;
}

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

Share this post


Link to post
Share on other sites