Make Main Navigation Bar Full Width

This topic has 12 replies, 2 voices, and was last updated 4 years, 11 months ago by Andrew Misplon.

Tagged: .container full width navigation bar

Author
Posts
May 19, 2020 at 12:14 pm #14449

Andrew Misplon
Keymaster
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.
May 19, 2020 at 12:31 pm #14450

Karen
Participant
Ok, I’ve switched to full width.
May 19, 2020 at 12:56 pm #14451
Andrew Misplon
Keymaster
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;
}
```
May 19, 2020 at 1:48 pm #14454

Karen
Participant
Perfect fix. Thanks so much Andrew.
Karen
May 19, 2020 at 6:29 pm #14456

Andrew Misplon
Keymaster
Super, glad to hear that helped 🙂
May 20, 2020 at 8:10 am #14457
Karen
Participant
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
May 20, 2020 at 8:27 am #14458
Karen
Participant
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?
May 20, 2020 at 11:10 am #14459

Andrew Misplon
Keymaster
Hi. The CSS posted looks good 🙂
May 21, 2020 at 5:42 pm #14472

Karen
Participant
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.
May 21, 2020 at 6:22 pm #14475
Andrew Misplon
Keymaster
Sure, 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

Karen
Participant
That did the trick.
Thanks as always, Andrew.
May 21, 2020 at 6:59 pm #14477

Andrew Misplon
Keymaster
Super, glad to hear that helped 🙂
Author
Posts

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.