Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Menu breakpoint + nav menu logo problem

Home Forums Support Menu breakpoint + nav menu logo problem

  • This topic has 23 replies, 3 voices, and was last updated 3 years ago by Tom.
Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #411281
    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!

    GP Premium 1.4.3
    #411422
    Leo
    Staff
    Customer Support

    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.

    #412216
    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!

    #412222
    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…

    #412437
    Leo
    Staff
    Customer Support

    – 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

    #412808
    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.

    View post on imgur.com

    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!

    #413032
    Leo
    Staff
    Customer Support

    – 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/

    #413230
    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!

    #413335
    Leo
    Staff
    Customer Support

    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!

    #413457
    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…

    View post on imgur.com

    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. πŸ™‚

    #413604
    Leo
    Staff
    Customer Support

    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.

    #415380
    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%;
    }
    }
    #415634
    Leo
    Staff
    Customer Support

    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;
    }
    #416170
    Daniel

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

    #416219
    Leo
    Staff
    Customer Support

    uhh try this CSS:

    @media (max-width: 1100px) and (min-width: 769px) {
        .main-navigation .menu-toggle {
            display: inline-block;
            width: auto;
            text-align: right;
        }
    }
Viewing 15 posts - 1 through 15 (of 24 total)
  • You must be logged in to reply to this topic.