Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Submenu not showing in mobile

Home Forums Support Submenu not showing in mobile

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #413296
    Shakespeare

    Hi Tom,

    I recently requested from your team to disable the arrow down for submenu in desktop view however I can’t seem to show it in mobile. For your reference here’s a code from my previous topic:


    @media
    (min-width:769px) {
    body .sf-menu > li,
    body .sf-menu > li > ul > li{
    position: static;
    /*
    disable arrow down
    */
    .menu-item-has-children .dropdown-menu-toggle {
    display: none;
    }
    .main-navigation .main-nav ul li.menu-item-has-children > a {
    padding-right: 20px;
    }
    }

    Please let me know how to return the arrow down or how to make the submenu work in mobile.

    Thanks

    GeneratePress 1.4
    GP Premium 1.4.3
    #413340
    Leo
    Staff
    Customer Support

    Hi there,

    That code should only applied to desktop since you wrapped with @media already.

    Looks like you are missing a closing bracket for the first block of code though. Best to make sure there are no syntax errors.

    #413433
    Shakespeare

    It still doesn’t show up. See code:

    /*
    horizontal menu
    */

    @media
    (min-width:769px) {
    body .sf-menu > li,
    body .sf-menu > li > ul > li{
    position: static;
    /*
    disable arrow down
    */
    .menu-item-has-children .dropdown-menu-toggle {
    display: none;
    }

    .main-navigation .main-nav ul li.menu-item-has-children > a {
    padding-right: 20px;
    }

    }
    }

    #413587
    Leo
    Staff
    Customer Support

    Closing bracket at the wrong spot I think.

    Should be after position: static;

    #413973
    Shakespeare

    Still not working Leo,

    Here is my full css:

    /*
    You can add your own CSS here.
    
    Click the help icon above to learn more.
    */
    
    .main-navigation .sticky-logo img {
        height: 70px;
    }
    
    /*
    horizontal menu
    */
    @media (min-width:769px) {
        body .sf-menu > li,
    body .sf-menu > li > ul > li{
    	position: static;
    }
    /*
    disable arrow down
    */
    .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }
    .main-navigation .main-nav ul li.menu-item-has-children > a {
        padding-right: 20px;
    }
    
    }
    
    body .main-navigation ul.menu > li > ul,
    body .main-navigation ul.menu > li > ul > li > ul {
    	width: 100%;
    	height: 40px;
    	padding-top: 13px;
    	padding-bottom: 8px;
    	border-bottom: 3px solid #fb5a29;
    	margin-top: -1px;
    }
    
    body .main-navigation ul.menu > li > ul > li,
    body .main-navigation ul.menu > li > ul > li > ul > li {
    	width: auto;
    }
    
    body .main-navigation ul.menu > li > ul > li ul {
    	left: 0;
    	top: 100%;
    }
    .sub-menu li {
        float: none;
        display: inline-block;
    }
    
    .main-navigation .main-nav ul ul li a {
        font-size: 13px;
    }
    
    .inside-navigation {
        position: static;
    }
    
    /*
    language right
    */
    .main-navigation li.menu-item-float-right {
          float: right;
    }
    
    .elementor-21 .elementor-element.elementor-element-igb9zr7 {
        max-height: 51px;
    }
    
    .main-navigation ul ul.sub-menu {
        text-align: center;
    }
    
    ul.sub-menu li {
        float: none;
        display: inline-block;
    }
    
    .menu-item i._mi, .menu-item img._mi {
    	margin-top: -22px;
    }
    
    .site-info {
        display: none;
    }
    
    .exp_floatdiv_content_padding_pro {
        box-shadow: none;
    }
    
    .secondary-navigation .menu-toggle {
          display: none;
    }
    
    .one-container .inside-article {
        padding: 0 0 0px;
    }
    
    

    Also please take note I set my mobile to slide navigation.

    Thanks

    #414008
    Tom
    Lead Developer
    Lead Developer

    Your website doesn’t seem to be loading for me – can you take a look and let me know?

    Thanks!

    #414060
    Shakespeare

    Hi Tom,

    My apologies, now its back.

    Thanks

    #414376
    Tom
    Lead Developer
    Lead Developer

    Can you try removing this from your custom CSS?:

    .dropdown-menu-toggle:before { 
        display: none;
    }
    #415372
    Shakespeare

    Hi Tom,

    Still not working. Also I’m not seeing :before in my css .

    What I actually wanted was to hide the arrow down in desktop view and show it in mobile view and enable submenu view using mobile.

    #415696
    Tom
    Lead Developer
    Lead Developer

    Here’s the CSS on your site: https://www.screencast.com/t/oNwwWRvZ8R

    It’s inside the Simple CSS plugin.

    You either need to remove that, or put it inside a media query like this:

    @media (min-width: 769px) {
        /* CSS in here */
    }
    #415707
    Shakespeare

    My bad Tom, I was looking at Additional CSS and not on Simple CSS. Tag as resolved.

    Thanks Tom and Leo!

    #415772
    Leo
    Staff
    Customer Support
    #492753
    elsa

    Hi,
    I’m very newbie at coding, so please need the code to show submenu on mobile because mine doesn’t show. Thanks.

    #492993
    Leo
    Staff
    Customer Support

    It should be showing on default unless it’s altered somehow.

    Please open a new topic. Thanks!

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