- This topic has 12 replies, 2 voices, and was last updated 4 years, 4 months ago by Andrew Misplon.
Tagged: .container full width navigation bar
- AuthorPosts
- May 19, 2020 at 12:12 pm #14447
KarenParticipantHi Andrew,
I’m having trouble getting the navigation bar to do full width without effecting the entire .container. You can see my dev site here. I need to replicate the old website, which is here.
If I remove the padding from .container, it changes all of the content throughout the site
.container { box-sizing: border-box; display: block; padding: 0; position: relative; margin: 0 auto; /*max-width: 85.7143rem;*/ }
How can I specify just the Nav Bar width? I’ve been going at it for ages and given up 🙂
(P.S. I have purchased Ultra Premium for this site, although that order number not being used on my dev site.)
Thanks, Karen
May 19, 2020 at 12:14 pm #14449
Andrew MisplonKeymasterHi Karen
Thanks for your support, it’s most appreciated.
It would be better to switch to the full-width Ultra layout, the default layout. I’ll try to help you from there.
May 19, 2020 at 12:31 pm #14450
KarenParticipantOk, I’ve switched to full width.
May 19, 2020 at 12:56 pm #14451
Andrew MisplonKeymasterThanks 🙂
Something like this:
.site-header .container { max-width: none; padding-right: 0; padding-left: 0; } .site-content { background: red; } .site-content .container { background: white; }
May 19, 2020 at 1:48 pm #14454
KarenParticipantPerfect fix. Thanks so much Andrew.
Karen
May 19, 2020 at 6:29 pm #14456
Andrew MisplonKeymasterSuper, glad to hear that helped 🙂
May 20, 2020 at 8:10 am #14457
KarenParticipantHello again .. A follow up question. What is the quickest way to reduce the height of the nav bar? I’ve been fiddling with it for awhile and have tried following:
.main-navigation, .main-navigation ul, .main-navigation ul li, .main-navigation div > ul > li > a { height: 90px; line-height: 90px; }
but it’s not quite right. The nav bar is too deep and I’d like it more like 80px high withiut messing uo the drop downs.
Thanks, Karen
May 20, 2020 at 8:27 am #14458
KarenParticipantI may have figured it out?
.main-navigation { height: 70px; } .main-navigation div>ul>li>a { height: 70px; line-height: 70px; }
Can you check out the site and let me know of that’s correct?
May 20, 2020 at 11:10 am #14459
Andrew MisplonKeymasterHi. The CSS posted looks good 🙂
May 21, 2020 at 5:42 pm #14472
KarenParticipantThanks.
The only issue I have now is that the collapsed mobile menu has that dark brown background (see live site).
Have tried a few things but can’t seem to sort it out.
May 21, 2020 at 6:22 pm #14475
Andrew MisplonKeymasterSure, no problem.
You can try something like:
/*MAIN NAVIGATION*/ @media (min-width: 1025px) { .main-navigation { background-color: #7a5839; width: 100%; } }
May 21, 2020 at 6:52 pm #14476
KarenParticipantThat did the trick.
Thanks as always, Andrew.
May 21, 2020 at 6:59 pm #14477
Andrew MisplonKeymasterSuper, glad to hear that helped 🙂
- AuthorPosts
You must be logged in to reply to this topic.