[Resolved] controlling the css of sub-menu for mobile

Home Forums Support controlling the css of sub-menu for mobile

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #361238
    mike

    hi,

    i am currently building a site, b3u5e.hosts.cx

    i have a hamburger menu both for desktop and mobile which i set by using a normal menu item with child items

    on the mobile the sub-menu opens opposite of the hamburger.

    any ideas?

    perhaps a simpler method to making the hamburger global?

    also – is there a way to control the header padding on menu only?

    GP Premium 1.3.1
    #361247
    Leo
    Staff
    Customer Support

    Hi there,

    Looks like the responsive features are not triggering for your site?

    Can you try disable all non-GP plugins to see if we can find the issue?

    Thanks!

    #361254
    mike

    the hamburger which is there is just an icon.

    is there a way i can keep the original hamburger from the responsive menu for the desktop as well?

    i have canceled the responsive menu using this code


    @media
    (max-width: 769px) {
    .menu-toggle,
    .main-navigation.toggled .main-nav > ul {
    display: none !important;
    }
    .main-navigation ul,
    .main-navigation ul li:hover > ul,
    .sf-menu li:hover > ul, .sf-menu li.sfHover > ul {
    display: block;
    }
    .main-nav .sf-menu > li {
    float: right;
    clear: none;
    }
    .nav-aligned-center.nav-below-header .main-navigation .menu > li,
    .nav-aligned-center.nav-below-header .main-navigation .sf-menu > li {
    display: inline-block;
    }
    .main-navigation .main-nav ul ul {
    display: none;
    float: right;
    position: absolute;
    top: auto;
    left: 0;
    z-index: 99999;
    width:200px;
    text-align:left;
    }
    .main-navigation .main-nav ul ul ul {
    right: 100%;
    top: 0;
    }
    .mobile-bar-items {
    display: none;
    }
    }

    #361289
    mike

    help? :\

    #361314
    Leo
    Staff
    Customer Support

    Sorry I’m not sure what you are trying to accomplish?

    You can’t really have hover on mobile so don’t think your method would work.

    Why did you want to hide GP’s mobile menu?

    #361400
    mike

    let’s start over

    i would like the hamburger menu to show on desktop as well.

    help please?

    #361401
    mike

    i have found this solution – the problem is the menu is not on the same line as the logo and it is centered instead of being on the right. and the sub-menu opens on the left – i need it to open to the right

    what now?

    thanks!

    https://generatepress.com/forums/topic/hamburger-menu-on-desktop-standard-page-design/


    @media
    (max-width: 768px) {
    .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;
    }
    }

    #361426
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Give this a shot:

    button.menu-toggle {
        position: absolute;
        text-align: right;
    }
    
    .main-navigation li a {
        text-align: right;
    }
    #361760
    mike

    thanks a lot this worked.

    BTW

    how can i control the padding of the mobile nav-bar/header? i need the padding under 768px to be 10px
    on the desktop 40px looks great but on mobile it’s too much

    thanks alot

    #361842
    Leo
    Staff
    Customer Support

    Try this:

    @media (max-width: 768px) {
        .inside-header {
            padding: 10px;
        }
    }
    #361859
    mike

    thank you it works

    i would like to note that your technical service is awesome

    keep up the great work!

    respect

    #361877
    mike

    another quick question

    because i set the mobile menu for desktop i now need to make it open on hover.

    is this possible?

    thanks

    #361978
    Tom
    Lead Developer
    Lead Developer

    That would require some custom javascript I’m afraid.

    #362061
    mike

    u are unable to help me with this?

    #362258
    Tom
    Lead Developer
    Lead Developer

    Writing custom javascript like that is a little outside of the scope of support on this forum. However, if I get a moment today I’ll try to come up with something.

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