Archived topic
mobile navigation hamburger with custom background
6 replies · Started by Nikos on February 2, 2021
hi,
1. i would like to have a custom background on the mobile navigation hamburger.
tom helped me do that on a previous post:
https://generatepress.com/forums/topic/hamburger-size-and-background-type/
i tried to "play" with the words, main-navigation --> mobile-navigation , but no luck :)
any help please? :)
2. in both, the desktop and mobile off canvas menu, how could i have a transparent background? i think the right word is to adjust the opacity? so the site behind will be showing a little
3. out of topic but a general related question: is there a "guide" or "manual" for the special css commands generatepress uses? reading in the forums i have managed to do and understand a lot, having 0 knowledge but always i can do things based on the topics answered. in our example above, i couldn't find in the forums the right word to play with the css of the mobile hamburger. so i thought maybe there is a guide to read.
thank you !!!
Hi there,
1. Try editing this CSS:
.main-navigation .menu-bar-items .menu-bar-item > a {
font-size: 30px;
height: 60px;
width: 60px;
line-height: 60px;
background: #1abc9c !important;
border-radius: 100%;
padding: 0;
text-align: center;
color: #fff !important;
}To this:
.main-navigation .menu-bar-items .menu-bar-item > a, #mobile-header .menu-toggle {
font-size: 30px;
height: 60px;
width: 60px;
line-height: 60px;
background: #1abc9c !important;
border-radius: 100%;
padding: 0;
text-align: center;
color: #fff !important;
}2. Have you tried the customizer options under Customizer > Colors > Off Canvas Panel?
1. thank you very much !!! i also added "#mobile-header .menu-toggle" to tom's answer to my previous post for the fixed position and it worked perfectly.
2. yes i have tried that initially, but while it was working on the desktop, on the mobile (because of different color calibration i think) i couldn't see the transparency (i had give it 0.98). then because of your answer, i took it down to 0.95 and it was as i wanted it to be :) it would be nice to have different fields at the color option for the desktop and mobiles but then again, every individual screen, brand, panel type, would have a different color hue, so there would be no way to get the colors exactly as somebody would like them to be everywhere.
thank you again !!!
hi again,
unfortunately i have noticed this:
i added leo's css as a 2nd snippet, i had already tom's css as another snippet.
but leo's css overcomes tom's css, so with tom's css i had a big hamburger menu on the desktop and i would like to have a small hamburger on the mobile. but when i insert leo's css, then the changes apply to the desktop version also.
how could i have separate hamburgers?
thank you !!!
So Tom's code would work for the desktop.
And use this for mobile only:
#mobile-header .menu-toggle {
font-size: 15px;
height: 30px;
width: 30px;
line-height: 30px;
background: #1abc9c !important;
border-radius: 100%;
padding: 0;
text-align: center;
color: #fff !important;
}yes maybe i didn't write it correctly. tom's code was perfect for the desktop version. but this is what i have asked also then :)
when i started working on the mobile version also, then i had more needs :)
and yes, your code worked exactly as i wanted :)
thank you very much !!!
No problem :)
