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

[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

[Tom]

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 🙂

[Jennifer]

Yes I can

Thank you for helping me.

[David]

Hi there,

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

[Jennifer]

Try this one, sorry about that.

[David]

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.

[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 🙂

[David]

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;
}

[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

[David]

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.

[Jennifer]

Okay thank you very much

[Author]

Posts