Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • November 3, 2015 at 12:19 pm #529124
    quantum

    Hello,

    is there a quick way to change the header color for a specific side ?

    I would like to change the color of the header and the phone number for my start page.

    http://fresh.kobalt.de

    Interesting side note. The video slide show stops looping after a while in Safari but works fine in Chrome.

    Fabian

    November 3, 2015 at 12:52 pm #529164
    Yigit

    Hi quantum!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .home #header.av_header_transparency * {
    color: orange;
}

    Regards,
    Yigit

    November 3, 2015 at 4:09 pm #529387
    quantum

    Hi Ygit,

    thanks works great.

    Last question, is it possible to change the color for the submenu text and make the submenu transparent too ?

    http://fresh.kobalt.de

    I tried to find the code in the enfold.css, but no luck.

    A help in any direction would be great.

    Fabian

    • This reply was modified 9 years, 1 month ago by quantum.
    November 4, 2015 at 3:30 am #529707
    Ismael

    Hey!

    You can modify the submenu style on Enfold > Advanced Styling panel. Edit the Main menu sublevel links element. Note that you can add two instances of this element, for the initial and the hover state.

    Best regards,
    Ismael

    November 4, 2015 at 12:02 pm #529923
    quantum

    Hey Ismael,

    thanks for your help. i know, but is it possible to change the color for the submenu text and submenu color (transparent) only for one site with the help of Quick CSS ?

    In this case it would be my landing page. In this case the main menu is transparent but the submenu is not at he landing page.

    http://fresh.kobalt.de

    fabian

    November 5, 2015 at 5:46 am #530518
    Ismael

    Hi!

    Thank you for the info. Add this in the Quick CSS field:

    .home #wrap_all .av-main-nav ul.sub-menu li a, .home #wrap_all .av-main-nav ul.sub-menu {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.home #wrap_all .av-main-nav ul.sub-menu li a .avia-menu-text {
    color: red;
}

    Best regards,
    Ismael

    July 24, 2019 at 3:02 pm #1121566
    jannnnnneke

    Hi!

    I want to change color of top bar. I succeed, but now I want the change that color in a few pages. This is the code I used for all the pages:

    #top #header_meta {
    background-color: rgba(0, 141, 156, 0.7) !important;
    }

    So that code is working. What code can I use for a specific page? These are not working:

    .page-id-121 #top #header_meta {
    background-color: rgba(0, 158, 83, 0.7) !important;
    }

    .page-id-121 #top .av_header_transparency #header_meta {
    background-color: rgba(0, 158, 83, 0.7) !important;
    }

    .post-id-121 #top #header_meta {
    background-color: rgba(0, 158, 83, 0.7) !important;
    }

    After I added codes to custom CSS I cleared my cache. And tried both codes first in custom css. Both not working.

    Love to hear from you!

    Janneke

    July 24, 2019 at 3:04 pm #1121567
    jannnnnneke

    If you need login info. See private content. Site is on maintenance mode :)

    July 25, 2019 at 1:49 am #1121790
    Ismael

    Hi,


    @jannnnnneke    : You have to remove the space between the page id and the #top selector.

    .page-id-121#top

    Or just remove the #top selector. Let us know if it helps.

    Best regards,
    Ismael

    July 25, 2019 at 8:51 am #1121837
    jannnnnneke

    Yes I removed the space and that worked!! Thanks!!

    When I want to add more page-id’s, is that possible in the same line? Something like:

    .page-id-120 .page-id-121 .page-id-122 .page-id-123#top #header_meta {
    background-color: rgba(0, 158, 83, 0.7) !important;
    }

    Or should I add this 4 times to custom CSS with another page ID?

    July 25, 2019 at 2:12 pm #1121904
    Rikard

    Hi jannnnnneke,

    Different selectors have to be separated by a comma, like this:

    .page-id-121 #top, .page-id-122 #top, .page-id-123 #top {
  arguments here
}

    Best regards,
    Rikard

    August 12, 2019 at 10:09 am #1126745
    jannnnnneke

    Hi! How does it work with portfolio items? This is all not working:

    .page-id-123#top #header_meta {
    background-color: rgba(0, 158, 83, 0.7) !important;
    }

    .post-id-123#top #header_meta {
    background-color: rgba(0, 158, 83, 0.7) !important;
    }

    .post-123#top #header_meta {
    background-color: rgba(0, 158, 83, 0.7) !important;
    }

    .post-123 #top #header_meta {
    background-color: rgba(0, 158, 83, 0.7) !important;
    }

    Thanks!

    • This reply was modified 5 years, 4 months ago by jannnnnneke.
    August 16, 2019 at 8:20 am #1128163
    Vinay

    Hi,

    You may not see the changes until the cached files are cleared in your browser.

    Please perform the below steps to clear the browser cache:

    1. Disable “merging and compression” for CSS and JS files from Enfold > Performance.
    2. If a caching plugin is installed check the plugin settings and clear the cache and deactivate the plugins for testing purpose.
    3. Hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right-click on the refresh button and select “Empty Cache and Hard Reload”.

    Best regards,
    Vinay

    August 20, 2019 at 2:53 pm #1129229
    jannnnnneke

    Hi there, sorry but it’s not working. On the portfolio page you need to see the same color green color in top bar as the other page. See private content.

    What do you think is the right code?

    August 22, 2019 at 1:44 am #1129811
    Ismael

    Hi,

    Thank you for the update.

    The selector or class is a bit different for portfolio items.

    .responsive .single-portfolio.postid-338 #header_meta {
      background-color: rgba(0, 158, 83, 0.7) !important;
}

    Take note of the “.postid-338” selector.

    Best regards,
    Ismael

    August 22, 2019 at 3:13 pm #1129994
    jannnnnneke

    Perfect, thank you!! I see I didn’t try .postid-338, and that worked!

    August 22, 2019 at 5:51 pm #1130051
    jannnnnneke

    Sorry, is it possible to change the color of the top bar when you scroll down? I made the top bar sticky!

    Thanks a lot!

    August 23, 2019 at 5:27 am #1130187
    Rikard

    Hi jannnnnneke,

    On which page you want to apply that to?

    Best regards,
    Rikard

    August 23, 2019 at 9:35 am #1130256
    jannnnnneke

    On all pages when scrolling down!

    August 26, 2019 at 1:59 am #1130797
    Ismael

    Hi,

    Thank you for the update.

    You can change the default color of the top bar or header meta on pages with transparent header by prepending the “av_header_transparency” selector to the #header_meta selector. To change the color on scroll, just remove the av_header_transparency and apply a different color.

    Best regards,
    Ismael

    August 29, 2019 at 5:05 pm #1131998
    jannnnnneke

    Thanks!!

    Only problem is that the top bar when header is transparant and not scrolled and not got a specific css code, the top bar is grey but I only want it grey when scrolled.

    See private data for link where the header is transparant but I didn’t add a specific color for the top bar. When you’re not scrolling the top bar is #eeeeee. It must be #eeeeee everywhere, rgba(0, 141, 156, 0.5) when header is transparant and on a few pages the top bar is another color which I got specific page ID css codes for.

    This is my css code now:

    .page-id-2#top .av_header_transparency #header_meta, .page-id-305#top .av_header_transparency #header_meta {
background-color: rgba(0, 141, 156, 0.5) !important;
}

.page-id-121#top .av_header_transparency #header_meta, .page-id-249#top .av_header_transparency #header_meta, .page-id-332#top .av_header_transparency #header_meta, .page-id-563#top .av_header_transparency #header_meta, .page-id-571#top .av_header_transparency #header_meta, .page-id-582#top .av_header_transparency #header_meta, .page-id-574#top .av_header_transparency #header_meta {
background-color: rgba(0, 158, 83, 0.5) !important;
}

.postid-338#top .av_header_transparency #header_meta, .postid-538#top .av_header_transparency #header_meta, .postid-541#top .av_header_transparency #header_meta, .postid-544#top .av_header_transparency #header_meta, .postid-547#top .av_header_transparency #header_meta, .postid-550#top .av_header_transparency #header_meta, .postid-553#top .av_header_transparency #header_meta, .postid-556#top .av_header_transparency #header_meta, .postid-559#top .av_header_transparency #header_meta {
background-color: rgba(0, 158, 83, 0.5) !important;
}

.page-id-308#top .av_header_transparency #header_meta {
background-color: rgba(97, 72, 127, 0.5) !important;
}

.postid-414#top .av_header_transparency #header_meta, .postid-425#top .av_header_transparency #header_meta, .postid-431#top .av_header_transparency #header_meta, .postid-434#top .av_header_transparency #header_meta {
background-color: rgba(97, 72, 127, 0.5) !important;
}

#header_meta {
background-color: #eeeeee !important;
}

    Itsn’t there a css code for sticky header, just like there is a code for transparency header?

    Hope you can help me!

    Thanks a lot!

    September 2, 2019 at 3:58 am #1132777
    Ismael

    Hi,

    Thank you for the update.

    The following css code should change the default background color of the header meta.

    #header_meta {
    background-color: #eeeeee !important;
}

    When the header is transparent or when the site isn’t scrolled, just append the “.av_header_transparency” selector.

    .av_header_transparency #header_meta {
    background-color: #eeeeee !important;
}

    An additional class attribute will be added to the header when the site is scrolled, but it’s only available when you set the header to shrink on scroll.

    Best regards,
    Ismael

    September 9, 2019 at 10:03 am #1135870
    jannnnnneke

    Oh now I see!! That’s working, thanks a lot!!

    September 9, 2019 at 2:36 pm #1136032
    Victoria

    Hi jannnnnneke,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 24 posts - 1 through 24 (of 24 total)
  • You must be logged in to reply to this topic.