Transparent Main Menu

Home Forums KLEO General questions Transparent Main Menu

This topic has 7 replies, 3 voices, and was last updated 9 years by apeedks.

  • Author

    Tagged: , ,

  • January 7, 2015 at 17:05 #41172
     Florian
    Participant

    Hi,

    how is it possible that the main menu background is transparency-gray at the beginning and after scrolling it changes the transparancy to darkgray (no transparancy).

    I found this:

    COPY CODE
    .navbar-transparent #header .is-sticky .kleo-main-header {
	background-color: rgba(0,0,0,0.4) !important;
}
    COPY CODE
    .navbar-transparent .navbar .kleo-main-header.header-scrolled {
background-color: #000;
}

    Thank’s!

    January 7, 2015 at 22:40 #41200
     sharmstr
    Moderator

    That code should work, but change #000 which is the code for black to a darkgray of your choice: http://petermartinconsult.supanet.com/computer/webpages/grays.htm

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

    This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

    January 8, 2015 at 02:44 #41231
     Florian
    Participant

    Hi,
    thanks for your reply.

    I know the Hex Color Codes. I took only black for example in the code 😉

    I tested again the css code and it is not working together.

    .navbar-transparent .navbar .kleo-main-header.header-scrolled {
    background-color: #000;
    }
    .navbar-transparent #header .is-sticky .kleo-main-header {
    background-color: rgba(0,0,0,0.4) !important;
    }

    If I use the code separately, it work perfektly:
    Only this:

    .navbar-transparent #header .is-sticky .kleo-main-header {
    background-color: rgba(0,0,0,0.4) !important;
    }

    or only this:

    .navbar-transparent .navbar .kleo-main-header.header-scrolled {
    background-color: #000;
    }

    but I need it together.

    How I mean:
    1. You load the website. => Menu is transparancy.
    2. You scroll down the website. => Menu changes from transparancy to full color.

    Example is attached 😉

    Attachments:
    You must be logged in to view attached files.
    January 8, 2015 at 03:07 #41240
     sharmstr
    Moderator

    Give this a try

    COPY CODE
    

.navbar-transparent #header .is-sticky .kleo-main-header.header-normal {
background-color:rgba(0,0,0,0.4) !important;
}

.navbar-transparent #header .is-sticky .kleo-main-header.header-normal.header-scrolled {
background-color:black;
}
    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

    January 8, 2015 at 03:17 #41243
     Florian
    Participant

    It is not working.
    It is all the time with this code transparancy (half dark gray). It changes not to a full color by scrolling.

    January 8, 2015 at 03:25 #41248
     Florian
    Participant

    I have the solution:

    COPY CODE
    .navbar-transparent #header .is-sticky .kleo-main-header.header-normal {
background-color:rgba(0,0,0,0.4);
}
.navbar-transparent #header .is-sticky .kleo-main-header.header-normal.header-scrolled {
background-color:black;
}

    Thank you for your effort.

    January 8, 2015 at 03:30 #41250
     sharmstr
    Moderator

    Right. I forgot to remove the !important when I copied from above. Sorry about that.

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

    This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

    June 10, 2015 at 08:14 #61754
     apeedks
    Participant

    Hello

    On similar subject –

    I want the header to be transparent black not standard invisible. Currently we see the header only when we scroll down.

    For example https://www.uber.com/ has the invisible header (without the white outline .

    Thanks

    Dee

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)

The forum ‘General questions’ is closed to new topics and replies.

Support Hours Our support team is available from Monday to Friday during regular office hours ( East European Time ). Please allow up to 48hrs so we can review your request and respond.
License info One theme purchase allows you to use it only on one WordPress install, so each new install requires a new license. We thank and appreciate everyone for their purchase as it allows us to keep supporting and releasing new updates.
wp-theme-installation-service

©2024 SeventhQueen - Powered by KLEO Theme

Terms & conditions | Privacy Policy

Log in with your credentials

Forgot your details?