Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

background of sticky navigation

  • YC
    June 6, 2023 at 1:04 am

    Hi there,

    I tried to turn on sticky navigation.
    It includes sticky navigation logo and menu.
    However, the background shows transparent.
    Is it possible to set a color background for the sticky bar?

    thanks

  • David
    June 6, 2023 at 4:31 am

    Hi there,

    the sticky navigation gets its colors from the Customizer > Colors > Navigation
    Are those colors set ?

  • YC
    June 6, 2023 at 5:35 am

    At Customizer > Colors > Navigation, we can set initial, hover and current color for primary navigation.

    However, I have transparent logo(left) and primary navigation(right) laid on top of a background image.
    Therefore, is it possible to trigger the navigation color on while sticky navigation shows?

  • David
    June 6, 2023 at 5:58 am

    Can i see your site ?

  • YC
    June 7, 2023 at 4:48 am

    The logo is while with transparent background.
    I was thinking that could we assign the sticky navigation bar a background color?

  • David
    June 7, 2023 at 4:53 am

    OK. Do this:

    1. In Appearance > Elements, edit the element titled: Merge
    1.1 go to its Site Header Tab and check the Navigation Colors option.

    https://docs.generatepress.com/article/header-element-overview/#site-header

    In here set the Colors that you currently have for your navigation. ie. a transparent background and white text.

    These will apply to the merged site header only.

    2. Now go to Customizer > Colors and set your Navigation background and link colors.
    These colors will apply to the Sticky Nav and anywhere the header is NOT merged.

  • YC
    June 7, 2023 at 5:15 am

    Not sure if I understood it fully, anyway, it seems now.
    thanks very much.

    However, the logo becomes larger on sticky navigation bar.
    It is normal? could we set the logo size for that?

  • David
    June 7, 2023 at 5:24 am

    The sticky nav logo gets its height from the menu item height.
    To change the logo without affecting the menu items, try this CSS:

    .main-navigation.sticky-navigation-transition .navigation-branding img {
    height: 48px;
}
  • YC
    June 7, 2023 at 5:36 am

    Got it. Thanks. This works well.
    Do we also need to set it for tablet and mobile phone mode?

  • David
    June 7, 2023 at 5:49 am

    If you want to you can do:

    #mobile-header.sticky-navigation-transition .site-logo img {
    height: 50px;
}
  • YC
    June 7, 2023 at 6:25 am

    thanks. David.

    How was the size of logo determined by the theme?
    I set 200px in width at Site Identity > Logo Width.

    when I switch to mobile or tablet mode, the logo becomes smaller automatically…

  • David
    June 7, 2023 at 1:32 pm

    The theme resizes the mobile header logos width to 100% and it Height to the Mobile Menu Item Height ( set in Customizer > Layout > Primary Navigation. This is to ensure it fits in the mobile header.

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