[Support request] How to go responsive (=) as soon the tabs in navigation doesn't fit

Home Forums Support [Support request] How to go responsive (=) as soon the tabs in navigation doesn't fit

Home Forums Support How to go responsive (=) as soon the tabs in navigation doesn't fit

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #376992
    Sylvester

    Hello

    My question is what i should do if i want my tabs in primary navigation to go responsive as soon it doesn’t fit the line anymore.

    If you try to scroll in the webpage on https://iapp.org you can see the navigation goes to the responsive tab (=) as soon it doesn’t fit the primary navigation anymore.

    I would like this too on my website juraliv.dk . But when i scroll in the kalender, jobopslag and search bar goes to a second line which is annoying and looks ugly.

    Then i scroll a little bit more the primary navigation goes to the (=) responsive tab.

    So my question is, how i can do the same as the webpage https://iapp.org

    Best regards

    #377058
    Leo
    Staff
    Customer Support
    #377231
    Sylvester

    Hey Leo, Thanks.

    Its okay but it mixes with some CSS (the hovering line) when you click on it.

    The = (box) also displays under the logo. Can i move it up, in the top next to the search bar like in mobile/ipad form?

    Try to take a look at it now; https://juraliv.dk/

    #377459
    Leo
    Staff
    Customer Support

    Ahh you are using mobile header. Try this instead: https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

    #377493
    Sylvester

    Thanks Leo, that is much better.

    It looks great, but when i press the = (box) no tabs appear, and my mobile header logo is a little small.

    I’m sorry i ask you alle these questions, but i sucks at CSS ^^.

    Here is alle my CSS you have given me so far (from other topics too, and this one)

    /* Mobile header */
    .mobile-header-navigation .mobile-header-logo,
    .mobile-header-navigation .mobile-header-logo img {
    height: 40px;
    padding-top:5px;
    }

    /* Navigation logo */
    .main-navigation .sticky-logo,
    .main-navigation .sticky-logo img {
    height: 70px;
    margin-left: 40px;
    margin-top: 0px;
    }


    @media
    (min-width:768px) {
    /* nav links effect */
    .main-navigation .menu > .menu-item > a::after {
    content: “”;
    position: absolute;
    right: 50;
    left: 50%;
    bottom: 0px;
    -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: 90%;
    }


    @media
    ( max-width: 1000px ) {
    #site-navigation,
    #sticky-navigation {
    display: none !important;
    opacity: 0;
    }
    #mobile-header {
    display: block !important;
    opacity: 1;
    width: 100% !important;
    }
    .mobile-header-navigation.is_stuck {
    box-shadow:0 2px 2px -2px rgba(0, 0, 0, .2);
    }
    .mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
    display: inline-block;
    float: right;
    clear: none;
    width:auto;
    }
    #mobile-header .menu {
    display: none;
    }
    .site-header {
    display: none;
    }
    .mobile-header-navigation .mobile-header-logo {
    float: left;
    display: block;
    }
    .mobile-header-navigation .mobile-header-logo img {
    position: relative;
    vertical-align:middle;
    padding: 10px;
    display: block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    .nav-float-left .mobile-header-navigation .mobile-header-logo,
    .rtl .mobile-header-navigation .mobile-header-logo {
    float: right;
    }
    .nav-float-left.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle,
    .rtl.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
    float: left;
    }
    .mobile-header-logo .mobile-header-navigation .mobile-bar-items {
    position: relative;
    float: right;
    }
    .rtl.mobile-header-logo .mobile-header-navigation .mobile-bar-items {
    float: left;
    }
    body:not(.mobile-header-logo) .mobile-header-navigation .mobile-bar-items {
    position: absolute;
    right: 0;
    top: 0;
    }
    body:not(.mobile-header-logo).rtl .mobile-header-navigation .mobile-bar-items {
    left: 0;
    right: auto;
    }
    }

    #377580
    Leo
    Staff
    Customer Support

    Hmm I think the toggle isn’t working is due to a js error. The CSS shouldn’t do that.

    Try #1 here: https://docs.generatepress.com/article/debugging-tips/

    As for mobile header logo, try this CSS:

    @media (max-width: 1000px) {
        .mobile-header-navigation .mobile-header-logo img {
            padding: 0px;
        }
    }
    #377742
    Sylvester

    You’re the man Leo

    The CSS code for the mobile header worked great!

    i found out that the bug is in the code:

    @media( max-width: 1050px ) {
    	#site-navigation,
    	#sticky-navigation {
    		display: none !important;
    		opacity: 0;
    	}
    	#mobile-header {
    		display: block !important;
    		opacity: 1;
    		width: 100% !important;
    	}
    	.mobile-header-navigation.is_stuck {
    		box-shadow:0 2px 2px -2px rgba(0, 0, 0, .2);
    	}
    	.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
    		display: inline-block;
    		float: right;
    		clear: none;
    		width:auto;
    	}
    	#mobile-header .menu {
    		display: none;
    	}
    	.site-header {
    		display: none;
    	}
    	.mobile-header-navigation .mobile-header-logo {
    		float: left;
    		display: block;
    	}
    	.mobile-header-navigation .mobile-header-logo img {
    		position: relative;
    		vertical-align:middle;
    		padding: 10px;
    		display: block;
    		-moz-box-sizing: border-box;
    		-webkit-box-sizing: border-box;
    		box-sizing: border-box;
    	}
    	.nav-float-left .mobile-header-navigation .mobile-header-logo,
    	.rtl .mobile-header-navigation .mobile-header-logo {
    		float: right;
    	}
    	.nav-float-left.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle,
    	.rtl.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
    		float: left;
    	}
    	.mobile-header-logo .mobile-header-navigation .mobile-bar-items {
    		position: relative;
    		float: right;
    	}
    	.rtl.mobile-header-logo .mobile-header-navigation .mobile-bar-items {
    		float: left;
    	}
    	body:not(.mobile-header-logo) .mobile-header-navigation .mobile-bar-items {
    		position: absolute;
    		right: 0;
    		top: 0;
    	}
    	body:not(.mobile-header-logo).rtl .mobile-header-navigation .mobile-bar-items {
    		left: 0;
    		right: auto;
    	}
    }
    
    

    I think the solution is in this ticket; https://stackoverflow.com/questions/28067506/why-isnt-the-toggle-button-my-responsive-wordpress-nav-working

    But i don’t know where to but the recommended CSS from the ticket in the above code that i use?

    #377929
    Leo
    Staff
    Customer Support

    Sorry what was the bug? It’s making the mobile toggle not working?

    #377970
    Sylvester

    Yes, when i put the code in it looks great, but the toogle doesn’t work in mobile/iPad state. It simply dosnt show the menues.

    When I remove the code, the toggle works fine again.

    I think there is a line missing or something. But I simply can’t see it.

    #378166
    Tom
    Lead Developer
    Lead Developer

    It looks like your first Elementor section has a top shape separator applied to it, which is sitting on top of the mobile menu making it so you can’t click it.

    If you remove that first shape separator from the top of the section, it should work.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.