[Resolved] Creating Secondary Menu – How to flush it up against Primary Menu

Home Forums Support Creating Secondary Menu – How to flush it up against Primary Menu

  • This topic has 10 replies, 3 voices, and was last updated 4 months ago by Jennifer.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1493472
    Jennifer

    Hello,

    I customized a secondary menu. But for some reason I cannot get it to flush up against the primary menu.

    It changes on scroll. The top menu disappears when scrolling and I am trying to find the correct css for both but not sure how to accomplish this.

    Can you tell me how to fix this please.

    See images for reference
    1. https://discoverybible.com/wp-content/uploads/2020/10/GP1.png
    the top menu is showing and I added a top:120px to flush it up against the header menu.
    2. https://discoverybible.com/wp-content/uploads/2020/10/GP2.png
    However when I scroll of course the top css is not going to work
    3. https://discoverybible.com/wp-content/uploads/2020/10/GP3.png
    here you can see my display

    Here is my code for the secondary menu

    <style>/* header */
    
    .headerDB {
      background-color: #fff;
      box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
      position: fixed;
      width: 100%;
      z-index: 3;
    	top:120px
    }
    
    .headerDB ul {
      margin: 0;
      padding: 0;
      list-style: none;
      overflow: hidden;
      background-color: #fff;
    }
    
    .headerDB li a {
      display: block;
      padding: 20px 20px;
      border-right: 1px solid #f4f4f4;
      text-decoration: none;
    }
    
    .headerDB li a:hover,
    .headerDB .menu-btnDB:hover {
      background-color: #f4f4f4;
    }
    
    .headerDB .logoDB {
      display: block;
      float: left;
      font-size: 2em;
      padding: 10px 20px;
      text-decoration: none;
    }
    
    /* menu */
    
    .headerDB .menuDB {
      clear: both;
      max-height: 0;
      transition: max-height .2s ease-out;
    }
    
    /* menu icon */
    
    .headerDB .menu-iconDB {
      cursor: pointer;
      display: inline-block;
      float: right;
      padding: 28px 20px;
      position: relative;
      user-select: none;
    }
    
    .headerDB .menu-iconDB .naviconDB {
      background: #333;
      display: block;
      height: 2px;
      position: relative;
      transition: background .2s ease-out;
      width: 18px;
    }
    
    .headerDB .menu-iconDB .naviconDB:before,
    .headerDB .menu-iconDB .naviconDB:after {
      background: #333;
      content: '';
      display: block;
      height: 100%;
      position: absolute;
      transition: all .2s ease-out;
      width: 100%;
    }
    
    .headerDB .menu-iconDB .naviconDB:before {
      top: 5px;
    }
    
    .headerDB .menu-iconDB .naviconDB:after {
      top: -5px;
    }
    
    /* menu btn */
    
    .headerDB .menu-btnDB {
      display: none;
    }
    
    .headerDB .menu-btnDB:checked ~ .menuDB {
      max-height: 240px;
    }
    
    .headerDB .menu-btnDB:checked ~ .menu-iconDB .naviconDB {
      background: transparent;
    }
    
    .headerDB .menu-btnDB:checked ~ .menu-iconDB .naviconDB:before {
      transform: rotate(-45deg);
    }
    
    .headerDB .menu-btnDB:checked ~ .menu-iconDB .naviconDB:after {
      transform: rotate(45deg);
    }
    
    .headerDB .menu-btnDB:checked ~ .menu-iconDB:not(.steps) .naviconDB:before,
    .headerDB .menu-btnDB:checked ~ .menu-iconDB:not(.steps) .naviconDB:after {
      top: 0;
    }
    
    /* 48em = 768px */
    
    @media (min-width: 48em) {
      .headerDB li {
        float: left;
      }
      .headerDB li a {
        padding: 20px 30px;
      }
      .headerDB .menuDB {
        clear: none;
        float: right;
        max-height: none;
      }
      .headerDB .menu-iconDB {
        display: none;
      }
    }
    </style>

    Is there a better way I am not aware of?

    Thank you
    Jennifer

    Jennifer
    Living His Word Ministries, Inc.
    www.livinghisword.org

    #1493551
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Is there any chance you can provide the URL/necessary login information in the private information field so we can take a closer look?

    Let us know πŸ™‚

    #1493630
    Jennifer

    Yes I can

    Thank you for helping me.

    Jennifer
    Living His Word Ministries, Inc.
    www.livinghisword.org

    #1493982
    David
    Staff
    Customer Support

    Hi there,

    can you check the login details as its not working for me.

    #1495411
    Jennifer

    Try this one, sorry about that.

    Jennifer
    Living His Word Ministries, Inc.
    www.livinghisword.org

    #1495504
    David
    Staff
    Customer Support

    No problems. Did you change the setup ? As i am not seeing the GP Secondary Nav. I assume you want the one built in Elementor to stick below the primary nav?

    If so add this CSS:

    /* Front end adjustment */
    .elementor-section.sticky-secondary-nav {
        top: 54px !important;
    }
    /* Front end adjustment with admin bar */
    .admin-bar .elementor-section.sticky-secondary-nav {
        top: 86px !important;
    }

    And then give that Elementor section a CSS class of sticky-secondary-nav

    You may need to tweak those pixel values.

    #1496272
    Jennifer

    I am sorry you missed this information I had it located under #1493630 October 17, 2020 @1:pm.

    The secondary menu is located here. You will have to be logged in to view this page and the menu.
    https://discoverybible.com/faith-g4102-pistis-2/

    There is no elementor involved on this page.

    Just a friendly reminder my CSS code and HTML code is under elements titled:
    Secondary Menu CSS by Jennifer
    Secondary Menu HTML by Jennifer

    You can view the code concerning the secondary menu.

    Thank you πŸ™‚

    Jennifer
    Living His Word Ministries, Inc.
    www.livinghisword.org

    #1496603
    David
    Staff
    Customer Support

    Aah ok πŸ™‚

    So you have this CSS to fix your custom secondary menu:

    .headerDB {
        background-color: #fff;
        box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
        position: fixed;
        width: 100%;
        z-index: 3;
        top: 120px;
    }

    First you need to adjust the top: 120px; value to match the height of the Primary nav which is 54px. So it should be top: 54px;

    Then we need another rule to adjust its position when you’re logged in and the admin bar is present.

    .admin-bar .headerDB  {
        top: 86px !important;
    }
    #1497588
    Jennifer

    The admin bar was not really my problem? It it the top bar menu that is throwing the secondary menu off. When you are scrolled all the way to the top the top menu bar appears but then when you begin to scroll down the top bar menu disappears leaving the secondary menu not flushed up against the primary menu.

    That is why I had the top css set to 120px and this did the trick but as you began to scroll the top css needed to be changed to 60px to compensate for the top bar menu being gone.

    Do you have a solution for the top bar menu difference and is what I am saying making sense?

    Can you please look at the page again when you are logged in for you can see the top bar menu appears at the top but as you begin to scroll the top bar menu is disappears.

    Thank you

    Jennifer
    Living His Word Ministries, Inc.
    www.livinghisword.org

    #1498072
    David
    Staff
    Customer Support

    Aah my bad… using CSS sticky is not going to work in this instance.
    What we could try is moving the secondary navigation inside the primary nav container and then both navs will stick together.

    To do that:

    1. Set the Customizer > Layout > Secondary Navigation –> Location to No Navigation.
    2. Create a new Hook Element:

    Add this snippet to the hook content:

    <?php generate_secondary_navigation_position(); ?>

    Select the inside_navigation hook
    Check execute PHP
    And set the Display Rules to Entire Site

    3. remove any of your current secondary nav sticky CSS.

    Once thats done its going to require some CSS etc to position it correctly.

    Let me know.

    #1500416
    Jennifer

    Okay thank you very much

    Jennifer
    Living His Word Ministries, Inc.
    www.livinghisword.org

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