[Resolved] Controlling distance between logo and menu (header removed)

[NBC]

I’m trying to insert space between logo and menu. Header, site title, tagline, and logo are removed.

Here’s the relevant CSS in my child theme.

@media (min-width:769px) {
    .main-navigation {
        padding-left: 0px;
        padding-right: 10px;
    }
}
/*This moves the menu away from the logo*/
 .main-nav > ul > li:first-child > a {
    padding-left: 80px;
}

/*This keeps the CSS code from reducing the size of the logo*/
.main-navigation .navigation-logo img {
	padding: 0px!important;
}

.site-header {
    display: none;
}

/* nav links effect */
.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 50;
    left: 50%;
    top: 107px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);

    display: block;
    width: 0;
    height: 8px;

    background-color: currentColor;
    transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
    width: 90%;
}

I have one problem. The code that moves the menu away from the logo does not affect the underline that appears under the current menu item. As a result, when the home page is displayed, the underline starts at the right edge of the logo, making the underline too wide.

Is there any way to fix this? It looks really odd.

Thank you in advance for any insights!

[Leo]

Hi there,

Can you link me to the page? Thanks!

[NBC]

No, this is being developed on localhost.

You can’t suggest anything based on the CSS I shared?

[Leo]

This kind of issue is hard to visualize without seeing the site.

Any chance you can duplicate it on a live server so I can see? Thanks!

[NBC]

Ah, well.

Please don’t post any screen shots from this site. I sent a link to the e-mail address.

[Leo]

Instead of adding left padding to the first menu item, try adding right padding to the logo:

.main-navigation .navigation-logo {
    padding-right: 80px;
}

[NBC]

I very carefully removed that padding

.main-navigation .navigation-logo img {
	padding: 0px!important;
}

because it makes the logo appear smaller. Is there another way to accomplish this?

[NBC]

If there’s another way to keep the navigation logo from shrinking in size besides removing the padding from it, please let me know. I looked for another way to do this.

Unfortunately, this site design is useless if I can’t get the menu separated from the logo without the menu-item underlines being affected.

[Leo]

Hmm our code are different. My code shouldn’t change the logo size at all.

Have you tried it but it’s not working?

[NBC]

I commented out this

/*
 .main-nav > ul > li:first-child > a {
    padding-left: 80px;
}
*/

and this

/*
.main-navigation .navigation-logo img {
	padding: 0px!important;
}
*/

and added this instead

.main-navigation .navigation-logo {
    padding-right: 80px;
}

The logo shrank from the center. The padding reduces the size of the logo.

To show proof of what I’m saying, I’ve uploaded “Before” and “After” screen shots to the home page of the demo version of the site.

[Leo]

You can keep this one:

.main-navigation .navigation-logo img {
	padding: 0px!important;
}

[NBC]

And we have a winner! Thanks, Leo!

[Leo]

No problem!

[Author]

Posts