Viewing 28 posts - 1 through 28 (of 28 total)
  • Author
    Posts
  • January 10, 2016 at 7:34 am #562646
    Jasmer

    How do I change the color

    From This
    https://dl.dropboxusercontent.com/u/1049926/Screen%20Shot%202016-01-09%20at%2011.27.36%20PM.png

    To This (the top bar here is ever so slightly transparent, perhaps 95% opacity. I do not want it solid black)
    https://dl.dropboxusercontent.com/u/1049926/Screen%20Shot%202016-01-09%20at%2011.29.02%20PM.png

    *Important With the transparent glassy header set, I want the black bar to change to 95% opacity black. I do not want the header to change to white upon scroll.

    Thank you,

    Jas

    January 10, 2016 at 7:04 pm #562773
    Vinay

    Hi Jasmer!

    Thank you for using Enfold. Please share the URL of the website so we can provide you with quick CSS.

    Best regards,
    Vinay

    January 10, 2016 at 8:20 pm #562798
    Jasmer

    I’ve included the link below. Actually it appears as though the top bar is black but I would like quick CSS to change the opacity of both bars as described above.

    Thanks Vinay!

    Jas

    January 11, 2016 at 5:59 pm #563394
    Yigit

    Hey!

    Please add following code to Quick CSS 

    #header.av_header_glassy {
    background: rgba(0,0,0,0.5);
}

    Cheers!
    Yigit

    January 13, 2016 at 3:57 pm #564765
    Jasmer

    Thank you, this does half of it. Can you tell me how to make the title bar black upon scroll? Right now it is white. I’d like it to be black however to have a slight opacity. 10% maybe. See below. Thank you..

    • This reply was modified 8 years, 11 months ago by Jasmer.
    January 13, 2016 at 4:04 pm #564768
    Yigit

    Hi!

    Can you post the link to your website?

    Regards,
    Yigit

    January 13, 2016 at 4:09 pm #564771
    Jasmer

    Thank you

    • This reply was modified 8 years, 11 months ago by Jasmer.
    January 13, 2016 at 4:26 pm #564782
    Yigit

    Hey!

    Please go to Enfold theme options > General Styling > Logo Area and set it to black in “Logo Area background color”. Then go to Enfold theme options > Advanced Styling and edit “Main menu links” to change their colors.

    Regards,
    Yigit

    January 13, 2016 at 4:36 pm #564790
    Jasmer

    Hi Yigit,

    Again, I don’t want the “Logo Area background color” to be solid black. I’d like to have around a 10% opacity. How do I set the opacity. I assume I will need some CSS.

    Also, there is now a white border around the black “Logo Area background color”. How do I get rid of that white border?

    Thanks,

    Jas

    • This reply was modified 8 years, 11 months ago by Jasmer.
    January 13, 2016 at 4:43 pm #564797
    Yigit

    Hey!

    Please add following code to Quick CSS 

    .header_color .header_bg {
    background-color: rgba(0,0,0,0.8);
}
#header_main_alternate, #header_main {
    border: none!important;
}

    Cheers!
    Yigit

    January 13, 2016 at 4:56 pm #564806
    Jasmer

    Thank you. Ok there are a few quick problems. I followed your directions and…

    1. I want the font to stay white in the logo area before I scroll. (I need this)
    2. I want the font to be gray in the logo area after I scroll (done)
    3. I want the font to be white when I hover, after I scroll (done)
    4. I want the selected menu link to stay white when a menu item is selected after I scroll (I need this)

    I would like to know if there a way to do 1 and 4 in the settings or do I need quick css? The reason I want to know is because I may need to do this on more than one site.

    • This reply was modified 8 years, 11 months ago by Jasmer.
    January 13, 2016 at 5:55 pm #564874
    Yigit

    Hi!

    1- Please go to Enfold theme options > Header > Header Transparency and set transparent menu font colors to white.
    2- Please add following code to Quick CSS 

    .av-main-nav li.current-menu-item > a > .avia-menu-text {
    color: white!important;
}

    Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

    Regards,
    Yigit

    January 13, 2016 at 11:48 pm #565062
    Jasmer

    Perfect. Last question. On menu hover I’d like to make the links turn white not off-white or light grey. Do you know where that setting is?

    When I scroll and the menu shrinks, menu hover is white. That’s fine. Before menu shrinks, hover state, in menu links, is not white.

    I’m sure it is a setting I’m missing somewhere.

    Thank you

    • This reply was modified 8 years, 11 months ago by Jasmer.
    January 15, 2016 at 12:01 pm #566056
    Vinay

    Hey!

    I see you have sorted out both the issues… please let us know if there is anything else we can help you with.

    Regards,
    Vinay

    January 15, 2016 at 12:03 pm #566057
    Jasmer

    Hi Vinay,

    No, before scroll, the problem is still there. The menu font is light grey not #FFFFFF white. Only the selected menu link is white. I want to make all the menu links white. Do you know where that setting is?

    Thanks,

    Jas

    • This reply was modified 8 years, 11 months ago by Jasmer.
    January 15, 2016 at 5:47 pm #566242
    Yigit

    Hey!

    Please add following code to Quick CSS 

    #top #header .av-main-nav > li > a .avia-menu-text, #top #header .av-main-nav > li > a .avia-menu-subtext {
    color: white;
}

    Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

    Best regards,
    Yigit

    January 16, 2016 at 2:09 am #566360
    Jasmer

    Hi Yigit,

    1. I had to add !important to get that to work. Thank you

    2. I’d like to turn off the grey color on hover. I want that white as well. So all menu links white, all the time.

    Is there a better CSS than above to accomplish this. Totally white all the time?

    I deleted some Advanced Styling rules to minimize variables as they were not working.

    Thank you,

    Jas

    PS Yes I never copy the CSS from the email. I know this creates a problem.

    • This reply was modified 8 years, 11 months ago by Jasmer.
    January 18, 2016 at 1:11 pm #567173
    Yigit

    Hey!

    Please use following code instead

    #top #header .av-main-nav > li > a:hover > .avia-menu-text,#top #header .av-main-nav > li > a > .avia-menu-text { color: white !important; }

    Cheers!
    Yigit

    January 18, 2016 at 1:22 pm #567185
    Jasmer

    It doesn’t work. :(

    I deleted the previous code and tried the new one.

    • This reply was modified 8 years, 11 months ago by Jasmer.
    January 19, 2016 at 12:30 pm #567781
    Vinay

    Hey!

    The menu links appear white when i scroll please see screenshot… if this is not right please send us a screenshot so we can help you better.

    Regards,
    Vinay

    January 19, 2016 at 12:36 pm #567785
    Jasmer

    Hi Vinay,

    1. See post https://kriesi.at/support/topic/darken-transparent-glass-header/#post-566360

    “I’d like to turn off the grey color on hover. I want that white as well. So all menu links white, all the time.”

    The links are grey on hover before scroll. So when page loads links are very light grey.

    2. I’d also like to reverse the link colors on all “Fullwidth Submenus” on every page on the site. I would like the links white, then on hover turn to grey.

    Thank you,

    Jasmer

    • This reply was modified 8 years, 11 months ago by Jasmer. Reason: Changed request
    January 20, 2016 at 3:41 pm #568683
    Yigit

    Hi!

    Please create a temporary admin login and post it here privately so we can look into it

    Cheers!
    Yigit

    January 29, 2016 at 10:12 am #574404
    Jasmer

    There are a few small related issues and when I have attempted to adjust colors it affects other elements on the site.

    1. I’d like the Ajax search icon, in the header, to stay white, after I scroll and the header shrinks.

    2. I’d like the “Main Menu” links to stay white on hover.

    3. I’d like the “Fullwidth Submenu” links on the “News”, “Living” and “Culture” pages to be white on hover. The links are not #fffff, they are light grey.

    4. I’d like the SELECTED link, on the “Fullwidth Submenu”, on the “News”, “Living” and “Culture” pages to stay white once it is clicked, so the user knows which page they are on. (see screenshot below).

    5. I’d like to remove the dark grey separators between the links on the “Fullwidth Submenu”, on the “News”, “Living” and “Culture” pages.

    Thanks guys,

    Jas

    • This reply was modified 8 years, 10 months ago by Jasmer.
    February 1, 2016 at 2:41 pm #575773
    Yigit

    Hey!

    I added following code to Quick CSS field

    
#top .av_header_transparency .main_menu ul:first-child > li > a:hover, #top #wrap_all .av_header_transparency .sub_menu > ul > li > a:hover {
    opacity: 1;
}
.page-id-606 li#menu-item-615 .avia-menu-text, .page-id-602 li#menu-item-616 .avia-menu-text, .page-id-600 li#menu-item-617 .avia-menu-text, .page-id-592 li#menu-item-588 .avia-menu-text, .footer_color .av-subnav-menu a:hover,li#menu-item-search a {
    color: white!important;
}
#top .av-subnav-menu li a { border: none !important; }

    Please review your website now

    Regards,
    Yigit

    February 1, 2016 at 9:15 pm #576014
    Jasmer

    Almost perfect, but the request below only works on the News page. It doesn’t work on the Culture and Living pages.

    I put all the code in Quick CSS under /*Fullwidth Submenus*/ header.

    “4. I’d like the SELECTED link, on the “Fullwidth Submenu”, on the “News”, “Living” and “Culture” pages to stay white once it is clicked, so the user knows which page they are on.”

    Thank you

    February 3, 2016 at 2:25 pm #577109
    Jasmer

    Hello?

    February 3, 2016 at 6:26 pm #577240
    Yigit

    Hey!

    I added following code to bottom of Quick CSS

    #top .av-subnav-menu > li.current-menu-item > a > .avia-menu-text {
    color: white!important;
}

    Please review your website now

    Regards,
    Yigit

    February 8, 2016 at 9:06 am #579448
    Jasmer

    Solved! You can close topic. Thanks Yigit!

  • Author
    Posts
Viewing 28 posts - 1 through 28 (of 28 total)
  • The topic ‘Darken Transparent Glass Header’ is closed to new replies.