- This topic has 10 replies, 3 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
Hello, People of excellent service,
With this beautiful template, I learned some magic using Elements and creating nice headers the Home white on black logo, everywhere else in color.
Then I continued experimenting with some nice code I found, and it made super primary navigation.
.wp-block-group {border-radius: 25px}
.main-navigation .main-nav li ul a {
background-color: rgba(0,0,0,0.65);
border-radius: 10px;
margin: 3px;
}So now, as always, it also creates some new challenges. The mobile navigation, please help to set this up. I think I need to add a separate color scheme just for mobile.
So probably some CSS if the size is less, then show these <style> colors?
Please have a look and advice on my options.
bettinggroups.com
Customer Support
Hi there,
You can wrap any CSS inside a mobile media query like
@media (max-width: 768px) { /*CSS here */ }Then it will be mobile-only:
https://docs.generatepress.com/article/responsive-display/Let me know if this helps 🙂
Hi Leo,
Thank you… Not working yet. Let me try to elaborate. There are 4 types of pages.
1. Home
2. Pages
3. Reviews (Custom Posts / Archives)
4. Bookmakers (Custom Posts / Archives)On the Home and on the pages the main menu letters (home, join groups, sport groups, betting sites) should show in white. As it does on a normal screen. I set this up in elements but is is not converting to mobile.
On the Reviews and Bookmakers it is fine. these have no header and the letter should be dark.
Than a second issue with the menu on mobile. I would just like to add a little spacing in between the main menu (home, join groups, sport groups, betting sites) that unfolds when I click the hamburger.
FYI, I setup 2 types of elements. 1 for the Home and 1 for the Pages. Just to use different logo colors.
So how to:
a) Have white main menu letters on mobile home and pages
b) Create some space between the main menu on mobileKind regards
Customer Support
Hi J,
For request A, try this css:
@media (max-width: 768px) { body .header-wrap .main-navigation .main-nav ul li > a { color: #ffffff; background-color: transparent; } }Adding CSS: https://docs.generatepress.com/article/adding-css/
For request B, you don’t need css for it, you can adjust it at Customizing > Layout >Primary Navigation > Menu Item Height (mobile).
https://tinyurl.com/y76yatztLet me know if it works!
Hello Ying,
We are so close! Thank you..
When using the CSS with background-color: transparent; the menu (white letters) disappears when on the white background underneath the header.
So i changed it in background-color: rgba(0,0,0,0.65) that works better.
The problem now is that the hover does not work anymore throughout the entire menu, except hovering HOME.
Request B is resolved.
Never mind 🙂 It works great on my mobile.
Just one small thing tho.. It does not hightlite CURRENT PAGE in the menu.
Hi J,
To add highlight background color to current menu item, edited CSS here:
@media (max-width: 768px) { body .header-wrap .main-navigation .main-nav ul li > a { color: #ffffff; background-color: transparent; } body .header-wrap .main-navigation .main-nav li.current_page_item > a { background-color: yellow; /*replace it with the background color you like*/ color: black; /*replace it with the text color you like */ } }Let me know 🙂
Hi Ying,
Thanks again.. Unfortunately not the result we were hoping for. It seems to be overruled somewhere 🙁
Hi J,
I don’t see the code has been added in.
I assume it’s a cache issue, please clear and deactivate your cache plugin and clear all browser cache. If you have server caching in place, disable it. Then we can have another look!
Thanks!
Hello Ying,
Sorry for the terribly late reply… It is running great. Dit some updates an added WP-optimize.. All is looking perfect now.
🙂
No problem J 🙂
Glad it works now!
- You must be logged in to reply to this topic.