-
AuthorPosts
-
July 28, 2016 at 10:11 am #666099
Hello, I want to change the top bar menu colour, here are my conditions:
1. I used the transparent header to my homepage and just a homepage (to show the image of the slider)
2. And of course the top bar menu also get to transparent
3. I want to change the colour of my top bar menu into another colour and not transparent, But still maintain the transparency to my main menu on the hompage.I already try the advance styling in enfold menu, but the result is not what i want. so, i need a help to solve my problems.
Thank youJuly 28, 2016 at 10:27 am #666101try it in this way:
.header-scrolled #header_meta { background: #080 !important; }
the header-scrolled class is added at the end of the scrolling process – so this is i think what you want
the transparency of the top menu until scrolling comes to an end.maybe you have to make some rules for your listpoints in the top bar.
by the way – by using an rgba value you had the choice to make it a bit tranparent with a unique color:
.header-scrolled #header_meta { background: rgba(255, 150, 50, 0.5) !important; }
you can see it here: http://webers-testseite.de/ikom/neue-seite/
July 28, 2016 at 10:44 am #666106Thank you Guenni007 for the response, Already try your advice, but unfortunatelly that’s not what i want.
So, I use the sticky header, But with unstick top bar. Your methods will work if i used the sticky top bar too. but i prefer to used the unsticky top bar.
Is there possible to change main menu css code into transparent (but only in the homepage) ? So, that i can change the colour of the top bar from a advance styling menu?July 28, 2016 at 11:22 am #666122try to explain more precise what you want to achieve.
Btw. it is much easier if we have your testing page.
The changings should only affect the homepage – everything is fine on your other pages with your actual settings ?
the transparency of #header_main_alternate in which the main navigation is placed is in the header container (at the bottom of the header container)
so if this main navigation including container is transparent the background color of header is visible. !you can try this:
.home #header_main_alternate { background: rgba(255, 255, 255, 0.5) ; bottom: -50px; position: relative; }
now the main nav sits under the header not over it. But does it realy look good?
look here if this is what you mean: http://webers-testseite.de/ikom/July 28, 2016 at 1:09 pm #666180sorry it sound a little bit like you are ordering a pizza quatro stagioni
– without : artichokes, tomatoes or basil, mushrooms and ham or prosciutto, or olives
– but with : four different kind of Cheese (quattro formaggi) :lol:try to explain:
home page: transparent header, top bar scrolling, sticky header, main-navigation: tansparent
other pages: no transparent header, top bar scrolls too, sticky header, top bar different background-color than navigation.
etc.July 28, 2016 at 1:38 pm #666218Sorry if my explaination was not clear enough to you. Here are some of my setting :
1. A homepage with transparent and glassy option. I want and did this to show the full image of my layer slider (I did this in the page setting)
2. I chose a logo left, menu right, and a slim header in enfold/avia framework.
3. In the Header behavior I check : Sticky Header, Shrinking header, and unstick topbarAll I want is, just to make the top bar comes in colour (black,grey,etc) or no transparency, while I set the main menu/header into transparent.
After did some search, i found this question darken transparent ,July 28, 2016 at 3:20 pm #666278is this your output you want?
http://webers-testseite.de/ikom/or a little transparent:
.home #header_meta { background: rgba(0, 50, 150, 0.8) none repeat scroll 0 0 !important; }
the 0.8 are 80% Opacity
- This reply was modified 8 years, 4 months ago by Guenni007.
July 29, 2016 at 6:31 am #666486yeah, it’s work man.
thank you so much. case closed
August 1, 2016 at 11:21 am #667188Hi @lppslh,
Great, glad you got it working. Thanks @Guenni007 for helping out :-)
Best regards,
Rikard -
AuthorPosts
- The topic ‘Change top bar colour only in Transparent Header’ is closed to new replies.