Site logo

Archived topic

menu mobile

7 replies · Started by Eva on November 14, 2018

Viewing posts 1–8 of 8

Hi!
I would like the menu don´t appear in the form of an icon on the mobile phone. I would like that it show with the words, like in the computer.
Is it possible to do that?

Thank you very much

Hi there,

You could try this:

.menu-toggle:before {
    display: none;
}

.menu-toggle .mobile-menu {
    padding-left: 0;
}

Let me know :)

Hello again!

The problem is that I installed a plugin to be able to have three different menus depending on the page. Now, I do not know if this will affect all the menus?

I only want this in the main menu, in the home. This menu are only two words: empresas+social

You can see on my page http://www.evagarciabernal.com

Thank you very much!

That code should only affect the GP mobile menu.

Hi Tom,
I think I have not explained well.
What I want is to deactivate the responsive menu of the mobile.
Now looking in the forum I found a code that you gave to another person.

@media (max-width:768px) {
#site-navigation .menu-toggle,
#site-navigation .mobile-bar-items {
display: none;
}

#site-navigation ul {
display: block;
}

#site-navigation .main-nav li {
float: none;
display: inline-block !important;
clear: none;
}

#site-navigation .main-nav ul ul {
position: absolute;
top: auto;
width: 200px;
}

#site-navigation .main-nav ul ul ul {
left: 100%;
top: 0;
}

#site-navigation ul ul .dropdown-menu-toggle:before {
content: "\f105" !important;
}
}

I have tried and it works correctly.
But I would like that to only happen on the main page, and I have added page-id-4510 but it does not work ok. I'm doing something wrong ...
I've put this:

@media (max-width: 768px) {
    # page-id-4510 # site-navigation .menu-toggle,
    # site-navigation .mobile-bar-items {
        display: none;
    }

    # page-id-4510 # site-navigation ul {
        display: block;
    }
    
    # page-id-4510 # site-navigation .main-nav li {
        float: none;
        display: inline-block! important;
        clear: none;
    }

    # page-id-4510 # site-navigation .main-nav ul ul {
        position: absolute;
        top: auto;
        width: 200px;
    }

    # page-id-4510 # site-navigation .main-nav ul ul ul {
        left: 100%;
        top: 0;
    }

    # page-id-4510 # site-navigation ul ul .dropdown-menu-toggle: before {
        content: "\ f105"! important;
    }
}

Thank you very much

Ah sorry!

Instead of: # page-id-4510

Do this: .home

Thanks!
I put this:

.home #site-navigation .menu-toggle,
    #site-navigation .mobile-bar-items {
        display: none;
    }

  .home #site-navigation ul {
        display: block;
    }
    
   .home #site-navigation .main-nav li {
        float: none;
        display: inline-block! important;
        clear: none;
    }

   .home #site-navigation .main-nav ul ul {
        position: absolute;
        top: auto;
        width: 200px;
    }

   .home #site-navigation .main-nav ul ul ul {
        left: 100%;
        top: 0;
    }

   .home #site-navigation ul ul .dropdown-menu-toggle: before {
        content: "\ f105"! important;
    }
}

And doesn´t work.

Anyway, I like how show it all the pages without responsive menu.

But if you know what´s the problem in my code tell me please!

Thank you very much!

The only issue I see is an extra } at the end which isn't necessary.

Other than that, it looks like it should work.

This archived topic is closed to new replies.