This topic has 9 replies, 2 voices, and was last updated 10 years by 
-
-
Hello,
I have a couple questions about styling the header.
1. I would like to make the topbar/social-header sticky as well. Currently, only the home page has the top bar sticky but no where else and I would like that across the entire site.
2. When you set the “Transparent Main menu color” to Black, when viewed on mobile, the text is white. You cannot see it on the white background. The only way is if someone hovers over it (black background on hover). But that’s basically useless because on phone’s you cannot hover unless you are using a stylus. I need to change this to black text normally. The hover style can stay the same.
Thank you!
Hi,
For the first question use the below CSS
Add this css to wp-admin -> Theme Options -> General Settings -> Quick CSS
COPY CODE.header-color.social-header { position: fixed; width: 100% !important; } .navbar-transparent.on-light-bg .navbar .kleo-main-header.header-scrolled { margin-top: 34px !important; } .kleo-main-header.header-normal { margin-top: 34px !important; }For the second question please provide login credentials to can see your website.
Regards
Radu
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionI placed the above code in style.css within the child theme. It worked on desktop browsers, but the top bar now cuts part of the main nav on mobile when it collapses.
See attached pic for more details.
Hi,
The behavior of top bar is that, to be split in 2 rows and for the moment this cannot be adapted for mobiles.
At least not in quick way so I can provide you a fix for this.
Use the next code instead the code that i have provided you above , we will use media queries tags to be used only for desktops
COPY CODE@media (min-width: 990px) { .header-color.social-header { position: fixed; width: 100% !important; } .navbar-transparent.on-light-bg .navbar .kleo-main-header.header-scrolled { margin-top: 34px !important;} .kleo-main-header.header-normal { margin-top: 34px !important; } }Regards
Radu
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionHi,
Regarding the second question, can you please create a dummy page on your website where you will set transparent main menu and black to can see the behavior described by you ?
Best Regards
RAdu
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionThe problem arises at the home page; when it displays the collapsed mobile menu.
I have attached a picture of the issue.
Hi,
Add this css to your theme options -> general settings -> quick css
COPY CODE@media (max-width: 991px) #header .navbar-nav .dropdown-menu li a { color: #222 !important; }This is a temporary solution and this issue will be fixed in next update.
Regards
RAdu
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
The forum ‘General questions’ is closed to new topics and replies.