- This topic has 3 replies, 2 voices, and was last updated 8 years, 9 months ago by
.
-
Posts
-
My page address is:
http://atest.you2.pl/1) Sticky menu
Sticky menu makes me some trouble. When I set Sticky Navigation Transition to none (like now) the logo moves to the left too much and I just can’t center it. The “Masz pytania? Zadzwoń: 660 740 790” area has this line on top showing the background and I cannot remove it and the rest of the menu has the same line on the bottom. The problem is that I cannot identify the CSS classes responsible for it.
For example the “Katalog firm” menu item goes like this:
.main-navigation .main-nav ul li.menu-item-168 a { margin-top: 41px; color: #fff; }The question is which class shall I use to modify its appearance in sticky menu, e. g. to extend the margin-top?
Apart from being unable to identify the CSS selectors, I also noticed that the sticky menu displays the mentioned problems (lines and shifts) in a slightly different way for different Sticky Navigation Transition effects. Is there any way to control it using CSS?
2) Responsiveness
At the width 1162 px the header fits in one line and between 1161 px and 958 px the logo moves up which is exactly what I wanted. For the width 957 i fixed a breakpoint. Now, how to center the menu? I hid “Masz pytania? Zadzwoń: 660 740 790” item this way (it was the first element from the list):
/* Modyfikuje wyglad elementu 163 z menu glownego */ .main-navigation .main-nav ul li.menu-item-163 { visibility: hidden; }How to center the rest of the menu?
Thank You in advance for Your help.
Lead Developer
1. I think the easiest thing you can do here is to make it so your header is the navigation: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header
That way you get consistency between stuck and non-stuck, and can adjust the CSS for the one navigation/header instead of trying to mimic the look between two elements.
2. Try this:
@media(max-width:957px) { nav#site-navigation { float: none; margin: 0; text-align: center; } #site-navigation .main-nav > ul > li { display: inline-block; float: none; } #site-navigation .main-nav ul li.menu-item-163 { display: none; } }Yes, “header is the navigation” is the easiest solution for this type of problem. Now it looks like this:
1) How can I move the navigation logo horizontaly using CSS, so it also worked with sticky menu?
2) On the image below I marked a green dot. Suppose that I want to display there some text, but I want to do this conditionally – different text for different pages. How to do this quick and easy?
1. Not sure what you mean by this – can you explain a bit more?
2. Try this:
add_filter( 'generate_navigation_logo_output', 'tu_add_to_navigation_logo' ); function tu_add_to_navigation_logo( $output ) { return $output . '<div class="custom-element">Text</div>'; }Then some CSS:
.navigation-logo, .custom-element { display: inline-block; }
- You must be logged in to reply to this topic.
