Support/Ultra Theme/Make Main Navigation Bar Full Width

[Resolved] Make Main Navigation Bar Full Width

Tagged: 

  • Author
    Posts
  • May 19, 2020 at 12:12 pm #14447

    Karen
    Participant

    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

    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 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

Scroll to top