Stick Topbar, Sub Menu on Mobile Issues

[clark_lai]

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!

[Radu]

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 solution

What support service includes ? What not ?

[clark_lai]

This reply has been set as private.

[clark_lai]

This reply has been set as private.

[Radu]

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 solution

What support service includes ? What not ?

[clark_lai]

Still waiting for response to my second question.

Thanks

[Radu]

Hi,

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 solution

What support service includes ? What not ?

[clark_lai]

This reply has been set as private.

[Radu]

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

What support service includes ? What not ?

[clark_lai]

Great! I look forward to the next update!

[Author]

Posts