- This topic has 13 replies, 2 voices, and was last updated 3 years, 7 months ago by
.
-
Posts
-
I originally set up a primary menu, named primary. Then, I decided to make it a secondary menu. The site logo now appears in the secondary menu, as you can see at https://cttt.it4causeshosting.org/. I’ve applied the css that you suggest for a center logo in the navbar, and I think that’s what I need to change, but I’m not sure-can you show me what to change?
Customer Support
Hi Terry,
In your case, I would suggest:
1. Go to customizer > layout > secondary navigation > navigation location, choose
below header.2. Go to customizer > layout > primary navigation > navigation location, choose
float right.Let me know if this works.
That’s essentially what I’ve done, except putting the secondary menu below the header actually places it below the hero image.
Can you do what I suggested and let me have a look again?
That helped the logo problem, although it still looks a little weird when acrolling down. But, the secondary menu is below the hearder image, and I want it between the primary navbar and the hero image.
Are you using a block element for the page hero?
If so, can you try changing the element’s priority to
20?
https://www.screencast.com/t/iW7ow3sxBingo. But the secondary menu disappears if I scroll down.
Yes, because secondary navigation is not sticky, it will scroll up like other elements on your site.
If you want it to be sticky with the primary navigation, try add this CSS:
@media (min-width: 769px) { nav#secondary-navigation { position: sticky; top: 150px; } }That didn’t seem to work.
It is sticky now, but your site header height changes too much.
When this sticky primary navigation is active, the header height is 150px, and my CSS works well.
https://www.screencast.com/t/jyUjGKBulGuBut when sticky primary navigation is not active, the header height is only 79px, but the secondary navigation is still at the 150px:
https://www.screencast.com/t/rgWvRi0CDbTo solve this issue, we need to make the site header same height, no matter it’s sticky or not.
In order to do so, can you go to customizer > header, and enable the
use navigation as header option?Ok, did that, now how to adjust position?
Try change the CSS I provided here to this:
@media (min-width: 769px) .navigation-clone + .secondary-navigation { position: sticky; top: 65px; } }The value 65px is to match what you set at customizer > layout > sticky navigation > Menu Item Height.
Doesn’t seem to help.
So what’s the issue now? The logo on non-sticky navigation doesn’t fully show?
If that’s the issue, it’s because you’ve set the menu item line-height to 35px using this CSS in your child theme’s style.css:
@media (min-width: 769px) .main-navigation .main-nav ul li a { background-color: #ffffff; border: 2px solid #000000; color: #000000; line-height: 35px; }Try remove the
line-height: 35px;from the CSS.
- You must be logged in to reply to this topic.
