- This topic has 10 replies, 2 voices, and was last updated 6 years ago by Leo.
-
AuthorPosts
-
March 20, 2018 at 2:55 pm #524920Klaus
Hi there,
I’m about to brush up my GP site on a staging server.
What I want to accomplish is to have navigation search on mobile only and my main menu items centered on desktop. This is what I did:1. I activated navigation search via customizer
2. I disabled navigation search for desktops using@media (min-width: 769px) { .search-item { display:none; } }
3. This works fine on desktop as long as the menu items in the main navigation menu are left-aligned. The navigation search item on desktop reappears as soon as the menu items are centered or right-aligned.
What did I do wrong?
Any help appreciated.Klaus
March 20, 2018 at 9:50 pm #525088LeoStaffCustomer SupportHi there,
Hmm the CSS should work regardless what the navigation location setting is.
Your site is currently locked so I can’t see the issue.
Any chance you can unlock it or send me the password through Account Issue?
https://generatepress.com/contact/Please reference the topic URL.
March 20, 2018 at 9:53 pm #525090LeoStaffCustomer SupportOops just saw your e-mail with password info. Please mention that next time π
Can you set the navigation location to center so I can see the problem?
March 21, 2018 at 1:52 am #525172KlausHi Leo,
I just centered the navigation menu and the search item reappeared.
I also sent you admin access if you want to play around.March 21, 2018 at 7:45 am #525362LeoStaffCustomer SupportWas just getting overwritten.
Try this CSS instead:
@media (min-width: 769px) { .nav-aligned-center.nav-above-header .main-navigation .menu>li.search-item { display: none; } }
March 21, 2018 at 8:54 am #525527KlausHi Leo,
Thanks for the css snippet.
It works now with centered navigation menu. But the search item still reappears with menu items left- or right-aligned. But, as you stated: ‘the CSS should work regardless what the navigation location setting is.’, so isn’t there still something going wrong?
But for now I know that I will have to change css when repositioning the nav menu through customizer.Regards,
Klaus
March 21, 2018 at 5:07 pm #525840LeoStaffCustomer SupportWhen the navigation is set to center, your original CSS is overwritten so technically it’s working.
If you just do this it should work regardless where the navigation is:
@media (min-width: 769px) { .search-item { display:none !important; } }
I just like to avoid using !important as much as I can π
March 22, 2018 at 6:00 am #526268KlausHi Leo,
thanks again for your explanation. I had thought that ‘Simple CSS’ directives were always last in the cascade and so wouldn’t get overruled.
I totally agree that the !important property should be used as sparingly as possible. So I will stick to your first code suggestion and change css when necessary. It’s easily done and I’m not going to reposition the navigation menu on a daily basis.:-)
This thread can be marked as ‘RESOLVED’.Regards,
Klaus
March 22, 2018 at 9:13 am #526503LeoStaffCustomer SupportGenerally it will overwrite but sometimes the line above is more specific like in this case.
If you really want to understand it, use browser inspect to see the code when you add them.
No problem!
March 22, 2018 at 11:36 am #526646KlausLeo,
thanks for your advice, your help and your patience.
I appreciate it.Klaus
March 22, 2018 at 3:49 pm #527041LeoStaffCustomer SupportNo problem at all π
-
AuthorPosts
- You must be logged in to reply to this topic.