[Resolved] Menu breakpoint + nav menu logo problem

[Daniel]

Hi Tom/Leo,

I am having some trouble during creating a site

If I make my browser smaller, my menu doesn’t work well.
See the picture: https://imgur.com/JciIJP7

My menu now is “below” header”.

If I try “float right” with this code:
https://gist.github.com/generatepress/c23aef2d05807c39bb32

then my nav menu logo is just next to my menu tabs. Looks not good.
See the picture: https://imgur.com/QbiR5c7

What would you suggest? It’s totally okay, if I have the breakpoint for example at 1000px but then my logo still stays and do not disappear.
See pic: https://imgur.com/0cBuSkr

Thank you in advance!

[Leo]

Hi there,

What if we use the second solution (float right) then add some padding to the right of the logo?

Can you duplicate the scenario again so I can have a look? The current site only has 2 menu items.

[Daniel]

Hi Leo,

I am not sure if we add padding to the logo then it will work. And the padding will be seen in the sticky nav as well, won’t be?

Now the menu is float right, thank you for checking.

Really, only 2? Maybe because this will be a multilingual site and your browser detects it. If you switch it to Hungarian, you will have all the menu items.
See the hungarian version: https://imgur.com/QbiR5c7

Would be better to use site logo instead of nav logo?

I do not really know CSS, so really appreciate your help. And… Is there a documentation where I can see that for exmaple if I want to do something with the menu, I have to use this: .main-navigation?

Ps: As you can see, I use some CSS to have this underlined effect in my menu items. Is that possible to change it in mobile view? If you check, in mobile view the line is too long (also I need to add different backgrong in mobile view somehow because it is transparent now. Or better to use slide out nav?

Here is the code:

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

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

    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: 75%;
}

Thank you in advance!

[Daniel]

Ohh, It is not that long anymore because I added the CSS again and changed .main-navigation .menu to .navigation-clone.main-navigation .menu But I do not know how to change the background and text color. Also now it is not centered. If I cahnge this: background-color: currentColor; to white for example, nothing happens, only if I start to scroll down and the sticky menu appears.

Ps.: And I would be so happy if the flag would not be underlined…

[Leo]

– Since you are wanting the layout of navigation and sticky navigation to be different, try uploading the logo in Site Identity and set header alignment to left. Try that and I can have another look 🙂

– Try making the underline effect desktop only as there is no hover on mobile: https://docs.generatepress.com/article/responsive-display/

– What are you using the CSS to change? The sticky navigation style? If so all the CSS is here:
https://docs.generatepress.com/article/changing-navigation-colors/

Just replace all the .main-navigation with .main-navigation.navigation-stick

– Couple steps to exclude the underline on flag, you will need to add a menu custom class like .menu-underline too all the menu items except the flag: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Then modify the underline CSS to this:

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

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

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

Hope I didn’t miss anything 🙂 If you can separate your questions and just let me know what you would like to achieve that might make it easier. Thanks

[Daniel]

Hi Leo,

Thank you for your detailed description.

As you can see now, my logo is good. There is some padding problem only in sticky menu.
https://imgur.com/fRUmlO4

I added -10px top padding but doesn’t work.

/*site logo*/
.site-logo {
width: 14%;
height: auto;
padding-top: 10px;
padding-left: 50px;
}

/* Navigation logo */
.main-navigation .navigation-logo img {
    height: 130px;
	padding-top: -10px;
}

.main-navigation {
padding-top: 25px;
}

.navigation-clone.main-navigation {
padding-top: 0px;
}

I am having some trouble with the menu. Getting better but not perfect. Could you plese take a look:

@media (max-width: 768px) {
/* CSS in here for mobile only */

.main-navigation {
	background-color: #ffffff;
}

.main-navigation .main-nav ul li a, 
.main-navigation .menu-toggle {
	background-color: #ffffff;
	color: #000000;
}

/* MENU ITEM HOVER */
.main-navigation .main-nav ul li > a:hover, 
.main-navigation .main-nav ul li > a:focus,
.main-navigation .main-nav ul li.sfHover > a {
	color: #000000;
	background-color: #ffffff;
}

/* SUB-NAVIGATION HOVER */

.main-navigation .main-nav ul ul li > a:hover, 
.main-navigation .main-nav ul ul li > a:focus,
.main-navigation .main-nav ul ul li.sfHover > a {
	color: #ffffff;
	background-color: #000000;
}
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* CSS in here for tablet only */
}

@media (min-width: 1025px) {
/* CSS in here for desktop only */

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

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

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

The flag is not underlined anymore. Thank you so much! Is there a way to see all the flags in mobile menu? Now there is dropdown.

Thank you for your help in advance!

[Leo]

– Remove this:

/*site logo*/
.site-logo {
width: 14%;
height: auto;
padding-top: 10px;
padding-left: 50px;
}

Then add this to remove logo padding:

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

– What’s the problem with the menu?

– For showing all flags, I’d recommend creating a new menu:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#create-a%C2%A0new-menu
Set it to slide-out:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#setting-a-theme-location
Then activate for mobile only:
https://docs.generatepress.com/article/activating-slide-out-navigation/

[Daniel]

Hi Leo,

Thank you for you help again, I am almost done.

Slide-out menu works well. Is there a way to change the color of the toggle menu when it is sticky?

Not sticky: https://imgur.com/s7Txa63
Sticky: https://imgur.com/agAfrEa

I should change it to black if its sticky.

And the last thing is that I don’t know how to fix the breakpoint between desktop and mobile (so tablet). I think sticky menu makes it more difficult…

Not sticky: https://imgur.com/uAW06jH
Sticky: https://imgur.com/ZMoQ3r1

my code now:

@media (max-width: 768px) {
 button.menu-toggle {
        width: auto;
        float: right;
    }

    .main-navigation.slideout-navigation .main-nav ul li a {
		padding-top: 10px;
        background-color: #ffffff;
        color: #000000;
    }

    /* on hover */
    .main-navigation.slideout-navigation .main-nav ul li a:hover,
    .main-navigation.slideout-navigation .main-nav ul li.sfHover a {
        background-color: #ffffff;
        color: #3b3b3b;
    }
    
    /* current menu item */
    .main-navigation.slideout-navigation .main-nav ul .current-menu-item > a {
        background-color: #ffffff;
        color: #3b3b3b;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {

}

@media (min-width: 1025px) {
    .main-navigation .menu > .menu-item.menu-underline > a::after {
    content: "";
    position: absolute;
    right: 0;
    left: 50%;
    bottom: 15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);

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

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

Don’t really know what to add to

@media (min-width: 769px) and (max-width: 1024px) {

}

Sorry for the lots of question… Hope you are not angry 🙂

Thank you in advance!

[Leo]

Can’t change the entire row but you can change the toggle button when it’s opened like this:

button.menu-toggle.opened {
    background: #000;
}

This should help to change the break point: https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

We have feature planned to make it easier in the future 🙂

Not angry at all. These are valid support questions!

[Daniel]

Hi Leo!

The standard is:

@media (max-width: 768px) {
    /* CSS in here for mobile only */
}
@media (min-width: 769px) and (max-width: 1024px) {
    /* CSS in here for tablet only */
}
@media (min-width: 1025px) {
    /* CSS in here for desktop only */
}

What if I don’t use the standards and change the tablet and desktop width? Can it close problem? Now mine is the following and it seems to be working:

@media (max-width: 768px) {
    /* CSS in here for mobile only */
}
@media (max-width: 1100px) {
    /* CSS in here for tablet only */
}
@media (min-width: 1101px) {
    /* CSS in here for desktop only */
}

So there isn’t a way to change the color of the toggle menu when it is sticky, right?

Not sticky: https://imgur.com/s7Txa63
Sticky: https://imgur.com/agAfrEa

If I do this:

button.menu-toggle.opened {
    color: #000;
}

It works only if it is not sticky.

And in the tablet view it is crazy again…
https://imgur.com/tahw3yY

I do not see the menu toggle because it’s white… But what is that height of my sticky menu? 😀

Ps.: Is there a documentation where I can find for exampample if I want to change the toggle button when it’s opened, I have to refer to:

button.menu-toggle.opened

Even if I am a beginner, I can modify some css but I need to know first how to refer to what I would like to change.

Thanks again, again and again. 🙂

[Leo]

You can use your own break points if you want but tablet needs to be a range.

If you are using mobile header, this is the code you want: https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

Try this to make the menu toggle show on sticky:

@media (max-width: 768px) {
    .main-navigation.navigation-stick .menu-toggle {
        color: #000;
    }
}

You can try using the developer tool from your browser then you can see the name of each element. There are two many elements in the theme to list them out.

[Daniel]

Hi Leo,

Everything seems to be fine except the tablet sticky nav.

@media (max-width: 768px) {
 button.menu-toggle {
        width: auto;
        float: right;
    }

    .main-navigation.slideout-navigation .main-nav ul li a {
		padding-top: 10px;
        background-color: #ffffff;
        color: #000000;
    }

    /* on hover */
    .main-navigation.slideout-navigation .main-nav ul li a:hover,
    .main-navigation.slideout-navigation .main-nav ul li.sfHover a {
        background-color: #ffffff;
        color: #3b3b3b;
    }
    
    /* current menu item */
    .main-navigation.slideout-navigation .main-nav ul .current-menu-item > a {
        background-color: #ffffff;
        color: #3b3b3b;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
	.main-navigation .menu-toggle {
		display: block;
	}
	
	.main-navigation ul {
		display: none;
	}
	
	.main-navigation.toggled .main-nav > ul {
		display: block;
	}
	
	.main-navigation .main-nav ul ul {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
	}
	
	.main-navigation .main-nav .sf-menu > li {
		float: none;
		clear: both;
		display: block !important;
		text-align: left !important;
	}
	
	.main-navigation .sub-menu.toggled-on,
	.main-navigation .children.toggled-on {
		display: block !important;
		opacity: 1 !important;
	}
	
	.main-navigation .dropdown-menu-toggle:before {
		content: "\f107" !important;
	}
	
	.main-navigation .sfHover > a .dropdown-menu-toggle:before {
		content: "\f106" !important;
	}
	
	.main-navigation .menu-item-has-children .dropdown-menu-toggle {
		float: right;
	}
	
	.main-navigation .mobile-bar-items {
		display: block;
	}
	
	.main-navigation .menu li.search-item {
		display: none !important;
	}
	
	.main-navigation .sf-menu > li.menu-item-float-right {
		float: none !important;
		display: inline-block;
	}
	
	[class*="nav-float-"] .site-header .inside-header > * {
		float: none;
		clear: both;
	}

	.site-logo {
display: none;
	}

button.menu-toggle.opened {
    color: #000000;
}

    .main-navigation.slideout-navigation .main-nav ul li a {
		padding-top: 10px;
        background-color: #ffffff;
        color: #000000;
    }

    /* on hover */
    .main-navigation.slideout-navigation .main-nav ul li a:hover,
    .main-navigation.slideout-navigation .main-nav ul li.sfHover a {
        background-color: #ffffff;
        color: #3b3b3b;
    }
    
    /* current menu item */
    .main-navigation.slideout-navigation .main-nav ul .current-menu-item > a {
        background-color: #ffffff;
        color: #3b3b3b;
    }
}

@media (min-width: 1101px) {
    .main-navigation .menu > .menu-item.menu-underline > a::after {
    content: "";
    position: absolute;
    right: 0;
    left: 50%;
    bottom: 15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);

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

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

[Leo]

What’s wrong with the tablet sticky menu?

You can try changing the color for the toggle to show:

button.menu-toggle,
button.menu-toggle:hover {
    color: #000000;
}

[Daniel]

The problem is this: https://imgur.com/YIf14V9

[Leo]

uhh try this CSS:

@media (max-width: 1100px) and (min-width: 769px) {
    .main-navigation .menu-toggle {
        display: inline-block;
        width: auto;
        text-align: right;
    }
}

[Author]

Posts