[Resolved] hamburger size and background type

[Nikos]

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!!!

[Tom]

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 🙂

[Nikos]

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

[Tom]

You’re welcome 🙂

[Nikos]

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 !!

[Leo]

Any chance you can open a new topic for the question?

Thanks 🙂

[Nikos]

🙂 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 !!

[Leo]

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

[Author]

Posts