Navbar Transparent on desktop but non-transparent on mobile

[enda77]

Hi, on a mobile device the navbar is black with white text. I would like it to be white with back text. Turning off the header transparency will work but I only want it turned off on mobile devices.

Is this possible within the theme options or could you assist with css code how to do this.

Thanks

Enda

[Laura]

Hello I can do the css for you 🙂 can you share access?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[enda77]

This reply has been set as private.

[Laura]

Hello, i see it white with black text, did you resolve it?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[enda77]

This reply has been set as private.

[Laura]

Hello, please try by adding this to style.css of child theme

COPY CODE

.home-page .kleo-main-header.header-normal {
    background: white !important;
}
.home-page .navbar-toggle {
    background-color: black !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[enda77]

Hi Laura,

This does not work.
This just creates a white navbar for all screen types. I want the navbar to stay the way it is on the desktop (transparent) but when the navbar changes for the mobile screen to be not transparent. (This makes the mobile header the correct colors).

Thanks in advance
Enda

[Laura]

Hello, try with this

COPY CODE

@media (max-width: 991px) {

.home-page .kleo-main-header.header-normal {
    background: white !important;
}
.home-page .navbar-toggle {
    background-color: black !important;
}
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[enda77]

This reply has been set as private.

[Laura]

Hello, used this at quick css, hope it helps 🙂

COPY CODE

@media (max-width: 991px) {
strong.logo a {
    color: black !important;
}
ul#menu-landing-page-menu a {
    color: black !important;
}
.home-page .navbar-toggle {
    background-color: white !important;
}
.navbar-transparent .navbar-toggle .icon-bar {
    background-color: black !important;
}
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[enda77]

Hi Laura,

Thanks for the info, unfortunately this does not work either.

I have compared the two source codes, with the transparency on and off and the only difference in page code is the line “navbar-transparent on-dark-bg”. If I leave the transparency off and try to add this to the homepage when width is over 990px will this work?

Could you assist with code please.

Thanks
Enda

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Radu]

Hi,

Just add this css

COPY CODE

 @media(min-width:991px) {
    .kleo-main-header.header-normal {
        background: transparent !important;
    }
    .kleo-main-header *, .kleo-main-header a * {
        color:#333 !important;
    }
    div#main {
        margin-top: -88px;
    }

}

Change 333 color with your desired

No need to change everything else

The css will be added to wp-admin -> theme options -> General settings -> Quick CSS

Cheers
R

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 ?

[Author]

Posts