Archived topic
hamburger size and background type
7 replies · Started by Nikos on December 13, 2020
hi,
i am using gp pro as the main framework and elementor pro to do some artistic tricks.
i took as an example the mentor library site where we have a transparent header with the site name on the left and the hamburger menu on the right, which leads to an off canvas menu.
because i use different images on my hero section, sometimes the hamburger is not obvious when the image has the same color as the hamburger. i can easily add a background color to it but i don't like the square view it takes.
https://snipboard.io/2ftA1S.jpg
1. is there a css trick to make the background around the hamburger round?
2. is there a way to make the hamburger much bigger? i would like it to be ... super big :) (but only to desktop version)
i tried this
.main-navigation .menu-toggle {
font-size: 30px;
}
the tom suggested to another post but nothing happened.
i inserted it to the style.css through the theme editor. i don't use any plugins or cache.
3. last, i can't make the hamburger menu-header sticky. (desktop and mobile). note that i use a header element to "shape" the header as i want.
then i follow the solution tom suggested in other post by going to sticky navigation and turned it to on but then when i scroll down i get a "real" sticky header and not just the hamburger :)
any ideas?
thank you!!!
Hi there,
Something like this should do it:
.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;
}
#site-navigation {
background: transparent;
}
.main-navigation .menu-bar-items {
position: fixed;
top: 30px;
right: 30px;
}Let us know :)
thank you very much!! it worked perfectly :)
i removed the background transparent section in the middle because i had already applied a transparent background at the header element.
but i realised my big mistake: i had to insert the css code to the theme's additional css field.
till now, all the css changes i was trying to make, i was inserting them to the style.css at the theme editor. and they didn't work :)
thanks
You're welcome :)
hi again,
a little help please with the mobile hamburger? :)
i tried to search in the forums and find the correct css "word" for mobile navigation but because i am not sure, i wouldn't like to make a huge mistake.
i would like to do exactly the same as the code above does, but for the mobile navigation
i thought instead of main-navigation, i could change the code to mobile-navigation?
so i would have a round background also behind the mobile hamburger menu and having it sticky?
thank you !!
Any chance you can open a new topic for the question?
Thanks :)
:) you made it so difficult for me :) to translate in english and find the right words to open a new topic :) but for ... revenge, i have asked 3 things there instead for one !! :) :)
thank you !!
Thanks! We will get to it.
Please make sure to follow our forum guideline and keep 1 question per topic:
https://www.screencast.com/t/28JgWlRj7e
