[Resolved] hamburger size and background type

Home Forums Support [Resolved] hamburger size and background type

Home Forums Support hamburger size and background type

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1578250
    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!!!

    #1578896
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #1579072
    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

    #1580475
    Tom
    Lead Developer
    Lead Developer
    #1643289
    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 !!

    #1643291
    Leo
    Staff
    Customer Support

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

    Thanks πŸ™‚

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

    #1643365
    Leo
    Staff
    Customer Support

    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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.