Archived topic
menu mobile
7 replies · Started by Eva on November 14, 2018
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.