Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • November 27, 2020 at 9:58 am #1263476
    webWahine

    Hello

    I have a transparent 45 px high header on my home page. I set the background to:

    #header.av_header_transparency {
    opacity: 0.7;
    background: #000;
	/* background: transparent; */
}

    The problem is that the main menu items and the logo also have the opacity applied – I want them to be opacity: 1. I tried to change the z-index and opacity of the logo but both didn’t work, so I guess I’m targeting the wrong element?

    I also want to change the color of the main menu text before scrolling, and leave it as is after scrolling:

    /* main header background after scrolling */

.header_color .header_bg {
	border-bottom: 0px solid blue;
        opacity: 1;
	background: #fff !important;

/* main menu text - this also applies to the mobile menu */

.header_color .main_menu ul > li > a {	
	text-decoration: none;
    font-family: 'Open Sans',sans-serif;
    font-style: normal;
    font-weight: 600 !important;
    font-size: 12px!important;
    letter-spacing: 2px !important;
    color: #555 !important;
    text-transform: uppercase;
}

.header_color .main_menu ul > li > a:hover {
	color: #000 !important;
	text-decoration: none;
}

/* active page */

.header_color .main_menu ul:first-child > li.current-menu-item > a,
.header_color .main_menu ul:first-child > li.current_page_item > a {
	color: #ff0099 !important;
}
}

    Please advise and thank you in advance! :)

    November 28, 2020 at 2:48 pm #1263680
    Mike

    Hey webWahine,
    Sorry for the late reply and thanks for the login. Instead of applying opacity, try making the background color transparent like this:

    #header.av_header_transparency {
    background: transparent;
}

    If you would like the main menu text to be a different color before scroll, and then use the theme colors after scroll, please try this css:

    .av_header_transparency #avia-menu > li > a {
	color: #FFEB3B;
}

    Please adjust color to suit and then clear your browser cache and any cache plugin, and check.

    Best regards,
    Mike

    November 28, 2020 at 11:33 pm #1263709
    webWahine

    Ok, thanks. Here’s some code to help others style the text states more, below. I’ve added in both options for before scrolling bgs, in case someone also wants to have flexibility :)

    
#header.av_header_transparency {
    opacity: 0.7;
    background: #000;
	/* background: transparent; */
}

/* transparent text before scrolling */

.av_header_transparency #avia-menu > li > a {
	color: #fff !important;
    text-shadow: 1px 1px 2px #000;
}

.av_header_transparency #avia-menu > li > a:hover {
	color: greenyellow !important;
}

.av_header_transparency #avia-menu > li.current-menu-item > a,
.av_header_transparency #avia-menu > li.current_page_item > a {
	color: greenyellow !important;
}
    November 28, 2020 at 11:42 pm #1263712
    webWahine

    Sorry, there is still a problem. When I use a 0.7 opacity band both the menu text and the logo are picking up on that, so they are washed out. Can I perhaps change the z-index to make sure that those items are not fade by the background?

    November 28, 2020 at 11:43 pm #1263713
    Mike

    Hi,
    Thanks for sharing your solution, unless there is anything else we can help with on this issue, shall we close this then?

    Best regards,
    Mike

    November 28, 2020 at 11:45 pm #1263714
    webWahine

    I just posted about the text and logo being washed out by the bg. Please have a look :)

    November 29, 2020 at 2:20 am #1263719
    Mike

    Hi,
    Thanks, please remove the opacity and change the background color like this:

    #header.av_header_transparency {
    background: rgba(0, 0, 0, .7);
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    November 29, 2020 at 2:30 am #1263720
    webWahine

    That did it! Thank you so much :)))

    November 29, 2020 at 4:44 am #1263723
    Mike

    Hi,
    Glad to hear, unless there is anything else we can help with on this issue, shall we close this then?

    Best regards,
    Mike

    November 29, 2020 at 4:46 am #1263724
    webWahine

    Good here; thank you, Mike!

    November 29, 2020 at 1:30 pm #1263778
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Opacity of transparent header font and logo same as background with css’ is closed to new replies.