Jump to content

Archived

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

maui00wowi

full width navbar not fixed

Recommended Posts

maui00wowi

I am trying to make the navbar full width under the header but it seems to stop at the content box. There is also a lot of padding between the navbar and header image. I would like it to look something like this...

 

http://screencast.com/t/f8oaR26prB

 

I switched from framework to dms and am having trouble making it look the same as it did.

 

 

Share this post


Link to post
Share on other sites
Rob

Hi,

 

Very likely you had Nav Classic in Framework, which isn't available in DMS.

 

But, then you can 'fool the eye' to create the illusion of a full-width menu. 

 

Here's how:  In DMS, click on the Header section (top left corner).  One of the options is to clone it.  Do so.  The whole header will clone. Move the navbar into the cloned section or remove it from the top one.  Now, in the cloned section, create a custom class, call it my-head-back.

 

Then, in Custom,  add the following:

.my-head-back {background-color: black;}

 

Since the menu is black, and the background is now black, the menu will blend into the background, quite nicely and appear as if the whole menu is edge to edge.

 

Then, you can manage your top header as the container for the branding, social icons, and any business info you wish to present.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob

See it in action here:  http://www.epicurusgroup.com/

 

I used UberMenu, but NavBar would be the exact same.   Also, I set up a gradient so you could see how the menu blends into the background. Without a gradient, it's completely blended.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
maui00wowi

Thanks! It really helped. I was wondering if you could possibly help me fix the padding on the bottom. I feel the black bar is a bit too heavy looking, any way I can make it slimmer?

Share this post


Link to post
Share on other sites
Rob

This will cut the height down by limiting the padding to 4px.  You can make it 0, to eliminate any color above or below the menu.

 

#header .pl-section-pad {
    padding: 4px 0;
}
 


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
maui00wowi

I have the black bar named "my-black-area" will this make a difference in the coding? I copied in what you had and it didn't seem to change anything.

Share this post


Link to post
Share on other sites
Rob

Is there a link I can check out?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob

One of the containers has built-in padding-top and padding-bottom of 20px. 

 

Try adding:

 

#header .pl-area-wrap {

    background-position: 50% 0;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

#header .pl-area .pl-section .pl-section > .pl-section-pad {

    margin-bottom: 0;
    padding: 0;
}

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
maui00wowi

thank you sooooo much!!! worked like a charm, I appreciate how quick you were at getting back to all my questions.

Share this post


Link to post
Share on other sites
Rob

Please let my colleagues know at hello@pagelines.com.

 

Thanks.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
josh1178

Hi Rob, I'm using uber menu and want it to be full width within the content area but it's not.  It's always slightly narrower than the content area. I've tried setting default section padding to 0, but it doesn't seem to make a difference.  Actually, now that I look closely, all sections seem to have this padding. Any thoughts on how to fix this just for the ubermenu which ideally drops down and covers the content area perfectly?

 

Thanks

 

examples that show its offset:

http://imgur.com/FqrDEN0

http://imgur.com/B2m6yho

Share this post


Link to post
Share on other sites
Danny

josh1178

This topics question has been answered, if you have an issue please create a new topic.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×