Archived topic
Mobile Menu – change Position with CSS
6 replies · Started by Bettina on February 23, 2022
I would like to have the Mobile-Menu-Icon at the right side of the Logo.
I have no Mobile-Header because the Logo has to be in the middle.
The Primary Menu ist set under the header.
I wrote CSS in the Browser and it did exatly what I want.
But if I insert it to the additional CSS in the Customizer, it doesn't appear in the Browser. The Mobile Menu is still under the header.
Can you help me?
You can see the site in this moment at https://binussi.de
GeneratePress Pro with Avery Template from the site-library.
Here ist my CSS-Code:
/* START Mobiles Menu neben dem Logo */
@media (max-width: 768px) {
nav#site-navigation {
position: absolute;
right: 0px
margin-top: -72px;
}
nav#site-navigation .inside-navigation.grid-container {
padding: 0px;
}
nav#site-navigation .menu-toggle {
padding-left: 0px;
padding-right: 14px;
}
/* Mobil-Menu-Icon größer */
nav#site-navigation .gp-icon.icon-menu-bars svg {
height: 1.5em;
width: 1.5em;
}
/* Das Wort Menu ausblenden */
nav#site-navigation span.mobile-menu {
display: none;
}
}
/* END Mobiles Menu neben dem Logo */
Hi there,
if you can:
a) enable the Mobile Header and add the mobile logo
b) in Customizer > Layout > Primary Navigation --> Mobile Menu Label - delete the text so its an empty field.
Once thats done, let me know so i can see the site and provide you the CSS.
Thank you! The word "Menu" dissapeared and now I know how to change it :-)
But now I have the logo very small on the left.
I would like to have the logo in the middle and the menu-icon a little bit bigger.
Do you know, why my CSS doesn't work? That would have been the solution.
Try this CSS:
#mobile-header .site-logo.mobile-header-logo img {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 100px;
}
#mobile-header .menu-toggle {
line-height: 100px;
}Perfect !!!
Thank you so much !!!
You're welcome
