help with this top bar/navigation problem

hi :slight_smile: site: http://grass.globedigitaltesting.xyz

i am doing a site rebuild for a client using divi, and i need to achieve something close to this (with 3 bars):

now, i have found a plugin that allows me to create a bar at the top (called Top Bar), however it is just covering up my primary and secondary navigation menus :slight_frown:

i am looking for a way to make sure the bars do not overlap each other, OR an alternative way to get this top bar + button for free sample pack orders.

thanks so much,
Ryan

  • Tyler Postle

    Hey Ryan,

    I see you have a top header hidden behind the top bar. We can line them all up one on top of each other by using this CSS:

    body.et_fixed_nav.et_secondary_nav_enabled #main-header {
      top: 73px !important;
    }
    
    .container.clearfix.et_menu_container > div {
      margin: auto;
      width: 82%;
    }
    
    .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #top-header {
      top: 47px;
    }

    That first part it looks like you might already have in your custom stylesheet so you will want to just find it and change it if that is the case.

    If you are wanting to have it more like the site you showed there where the main part scrolls and then becomes fixed once it hits the top then you can have a look at this article here: https://css-tricks.com/scroll-fix-content/

    That should help you out :slight_smile:

    Any further questions just let us know. You may also want to contact Divi support as they will be a lot more familiar with their own theme so there may be some included functions that will help you do this even easier.

    Cheers,
    Tyler

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.