Jump to content
sladestudios

Branding Header Padding Remove & Centre Navigation

Recommended Posts

sladestudios    0
sladestudios

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
batman    389
batman
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/

 

 


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
sladestudios    0
sladestudios

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
sladestudios    0
sladestudios

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
sladestudios    0
sladestudios

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
batman    389
batman

Hi jacqui

You can try modify de padding with:

 

 

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

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
sladestudios    0
sladestudios

Thanks that works great.

 

Thanks again for everyone's help on this.

Jacqui

Share this post


Link to post
Share on other sites
Rob    547
Rob

Happy to have helped! Glad it all worked!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • lbhansen
      By lbhansen+
      I am slowly getting closer to something I like for the general appearance of my site. What's currently nagging me is trying to remove the top and bottom padding/margin from the image in the header. It seems that I've done what I want with the menu but there was dead space above the image and between the image and menu.
      Trying out padding and margin settings, I got something that came close to what I want but saw odd behavior along the way. Changing either the top or bottom padding to 0 (from blank), removed all padding from the top and sides but left a small band between the image and menu.
      Setting all eight padding and margin settings to 0 removed all except the band between image and menu. (But it seems that entering 0 in only the top or bottom padding option is all that was needed.)
      So, heading into the twilight zone, I changed the bottom margin to -1. That removed the band but allowed the menu to slightly overlap the image. AND, narrowing the browser, or viewing on a phone, caused the band to reappear.
      Perhaps there's also a problem with the menu but I don't see it.
      So that's where it stands at the moment: http://756.a44.myftpupload.com 
      I seems to me that if there is a default padding value, setting it to 0 should be all that's needed to get the two sections to meet perfectly on any device/browser width.
    • Perry
      By Perry+
      Hello There, 
      I am working with Platform 5 and have run into an unnerving problem. I am trying to position my clients picture along the bottom of the container, so that it sits right on the bottom. After a good hour of googling and messing with the CSS I figured I would ask the question here. Below is my screenshot displaying my problem. I will need to do this frequently in the future. 
      My Problem Image
      Unlike in DMS, when I add a margin to an embed or image box it simply makes the container larger while keeping the padding, I cannot have any padding or any space whatsoever on the bottom of my clients image.  Is there a way to remove all padding from the container so I can have this work across screen sizes? If not is there anyway to position an element directly at the bottom of another element in Platform 5? This seems like a basic feature and was easily attainable within DMS. 
      I cannot create an image combining all these elements as it will not scale well on mobile and will make my clients logo unreadable and her face incredibly small. 
       
      Thank you for any help,
      Perry
    • chamois_blanc
      By chamois_blanc+
      Hello,
      I am a bit confused about the usage of percentages for section padding/margin settings in the PL5 UI. Percentages don't scale well for mobile devices (especially in height), so those settings are pretty much useless. Case in point, the defaults are expressed in rem units, not percentages:
      .pl-sn-pad { padding: 1rem; ... } Why force the user to use percentages in the PL5 section UI when it would have been as easy to let the user specify the unit?
    • Kempston
      By Kempston+
      Good day
      How do I indent textbox content so that it's not flush against the side of the screen on mobile devices?
      When I view Kempston Truck Hire East London on my phone, the text is aligned against the side of the screen and doesn't look right.
      Many thanks
      Rob
    • pagelines_45
      By pagelines_45
      I am trying to remove the bottom padding from a media box.  When I inspect and change the value it works but I can not for the right css section names to change it in either the page css or custom code area.  I have even tried custom style for the page, but no luck.  Here is the site http://wordpress.howard-boats.com/  on the home page I am trying to get the wide sailboat image to touch the foot.  bottom-padding:0px  but I cant get it to work.  Thank you for your help I'm sure I am doing something stupid.
       
      David
       
×