Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #529124

    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

    #529164

    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

    #529387

    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 8 years, 3 months ago by quantum.
    #529707

    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

    #529923

    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

    #530518

    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

    #1121566

    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

    #1121567

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

    #1121790

    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

    #1121837

    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?

    #1121904

    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

    #1126745

    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 4 years, 6 months ago by jannnnnneke.
    #1128163

    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

    #1129229

    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?

    #1129811

    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

    #1129994

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

    #1130051

    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!

    #1130187

    Hi jannnnnneke,

    On which page you want to apply that to?

    Best regards,
    Rikard

    #1130256

    On all pages when scrolling down!

    #1130797

    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

    #1131998

    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!

    #1132777

    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

    #1135870

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

    #1136032

    Hi jannnnnneke,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

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