controlling the css of sub-menu for mobile

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!

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;
}
}

help? :\

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?

let's start over

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

help please?

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;
}
}

Hi there,

Give this a shot:

button.menu-toggle {
    position: absolute;
    text-align: right;
}

.main-navigation li a {
    text-align: right;
}

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

Try this:

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

thank you it works

i would like to note that your technical service is awesome

keep up the great work!

respect

another quick question

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

is this possible?

thanks

That would require some custom javascript I'm afraid.

u are unable to help me with this?

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.