[Resolved] menu bar full widt transparent

Home Forums Support [Resolved] menu bar full widt transparent

Home Forums Support menu bar full widt transparent

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #671001
    Torsten

    Hi,
    my client agreed to work with a horizontal menu, finally, which should make things alot easier.
    1.) I’m missing how to set the menu bar to full width with transparecy set to rgba(255,255,255,0.8), same as the header image, when you scroll to one of the green sections you’ll see that everything right of the menu items is fully transparemt.
    2.) Other question, I cant’t set the menu left padding, I would like to define header and menu left-padding in percentage…
    best,
    Torsten

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #671109
    David
    Staff
    Customer Support

    Hi there,

    you can set the Primary Navigation Full width in the Customiser > Layout > Primary Navigation.

    Padding options via CSS:

    .site-header .inside-header {
        padding-left: 5%;
    }
    .main-navigation .inside-navigation {
        padding-left: 5%;
        box-sizing: border-box;   
    }
    #671131
    Torsten

    thx for the padding, nice.
    for the menu bar please take a look at https://bit.ly/2CteogC
    upper image shows actual state, second one what I would like to achieve…
    Thx in advance,
    Torsten

    #671135
    David
    Staff
    Customer Support

    So the Customiser settings don’t work?
    If so then this CSS:

    .main-navigation {
        width: 100%;
    }
    #671237
    Torsten

    Yes!
    thx a lot!

    another one:
    I would like the menu bar to keep maximum the width of the header logo on one line when the browser window gets resized (within the blue vertical lines here → https://bit.ly/2oQRKFf )
    the logo is set to:

    .site-logo {
    padding-top: 5%;
    width: 70%;
    box-sizing: border-box;
    height: auto;
    }

    upper image shows what I would like to achieve, below shows what it actually is…
    https://bit.ly/2NXaPkc

    best, Torsten

    #671274
    David
    Staff
    Customer Support

    Bit tricky as the two elements are not in the same container and it means making the font responsive to the viewport, so this should get you started:

    @media (min-width: 768px) {
        .main-navigation .main-nav ul li a {
            font-size: 1.5vw;
        }
    }
    #671281
    Torsten

    Top!
    thanks David, have a nice weekend,
    Torsten

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