[Resolved] mobile navigation hamburger with custom background

Home Forums Support [Resolved] mobile navigation hamburger with custom background

Home Forums Support mobile navigation hamburger with custom background

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1643315
    Nikos

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

    #1643641
    Leo
    Staff
    Customer Support

    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?

    #1643759
    Nikos

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

    #1643874
    Nikos

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

    #1644569
    Leo
    Staff
    Customer Support

    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;
    }
    #1644662
    Nikos

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

    #1644694
    Leo
    Staff
    Customer Support
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.