Karen May 19, 2020 · 12:12 pm #14447 Hi 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
Andrew Misplon Puro May 19, 2020 · 12:14 pm #14449 Hi 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.
Karen May 19, 2020 · 12:31 pm #14450 Ok, I’ve switched to full width.
Andrew Misplon Puro May 19, 2020 · 12:56 pm #14451 Thanks 🙂
Something like this:
.site-header .container {
max-width: none;
padding-right: 0;
padding-left: 0;
}
.site-content {
background: red;
}
.site-content .container {
background: white;
}
Karen May 19, 2020 · 1:48 pm #14454 Perfect fix. Thanks so much Andrew.
Karen
Andrew Misplon Puro May 19, 2020 · 6:29 pm #14456 Super, glad to hear that helped 🙂
Karen May 20, 2020 · 8:10 am #14457 Hello 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
Karen May 20, 2020 · 8:27 am #14458 I 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?
Andrew Misplon Puro May 20, 2020 · 11:10 am #14459 Hi. The CSS posted looks good 🙂
Karen May 21, 2020 · 5:42 pm #14472 Thanks.
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.
Andrew Misplon Puro May 21, 2020 · 6:22 pm #14475 Sure, no problem.
You can try something like:
/*MAIN NAVIGATION*/
@media (min-width: 1025px) {
.main-navigation {
background-color: #7a5839;
width: 100%;
}
}
Karen May 21, 2020 · 6:52 pm #14476 That did the trick.
Thanks as always, Andrew.
Andrew Misplon Puro May 21, 2020 · 6:59 pm #14477 Super, glad to hear that helped 🙂