- This topic has 14 replies, 4 voices, and was last updated 5 years, 1 month ago by
Dani.
-
AuthorPosts
-
December 1, 2015 at 8:27 pm #157173
Mitchell
Hi Tom
Connected with my last challenge (having the page header image fill the window when the page loads), I am now trying to tailor my navigation menu so that when the page loads, the menu is on a transparent background, sitting over the image.
Then, when the page scrolls, I want to have the menu background become a solid colour (because much of my site is on white backgrounds, and the menu text gets lost without a background as the page scrolls).
I find I am VERY close, but am now admitting defeat and asking for help. ;-P
I’ve added CSS to my site in an attempt to separately style the main nav and the stick nav menus.
.main-navigation { background: rgba(0, 0, 0, 0); /*Makes the background transparent*/ position: absolute; float: center; left: 50%; margin-right: -50%; transform: translate(-50%); /*The combination of the above code takes the menu out of its own section and places it over the top of the header image, but I am not 100% sure how โ I am a complete novice copy-pasting code snippets from random Google searches! This code also results in a weird, undesirable menu layout, but one issue at a time*/ padding: 10px; } .navigation-clone { background: rgba(0, 0, 0, 1); /*This DOES fill the background in with black (which is what I want), but the menu displays completely wrong*/ }
So on page load, the menu looks like this:
Note that the menu has decided to display over two lines, which is not what I want. But, as I said, one issue at a time. ๐Then, when I scroll down, the sticky menu (with a fade transition) looks like this:
I have tried using
position
andfloat
code to move it across the page, but it doesn’t seem to respond. I am aware, though, that I am basically just copy-pasting code and throwing it at the screen, hoping it will do something, all without really understanding. :-/What’s the best way to get the outcome I’m looking for?
Cheers
December 1, 2015 at 8:31 pm #157174Stacey Usborne
StaffCustomer SupportHi,
I think Tom might be able to help more if you can share your URL ๐
If you don’t want to post it here, you can email it to him at support@generatepress.com
December 1, 2015 at 9:12 pm #157182Mitchell
December 1, 2015 at 10:32 pm #157194Tom
Lead DeveloperLead DeveloperHi there,
That’s close, but I’m going to try a different approach to it.
Delete what you’ve added and add this:
.home .main-navigation:not(.navigation-clone) { background-color: transparent; position: absolute; width: 100%; top: 0; }
That should also fix your navigation displaying over two lines.
Let me know ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentDecember 2, 2015 at 2:18 pm #157482Mitchell
It’s a thing of beauty, Tom. ๐ Thanks so much for your help.
I said it last time I posted, but GeneratePress is a great theme, and the support on this forum is just at another level!
Thanks again!
December 2, 2015 at 2:37 pm #157485Tom
Lead DeveloperLead DeveloperYou’re very welcome! ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 27, 2016 at 1:19 am #175654Dani
Hi Tom,
I try to put in this CSS but it breaks my main menu & header.
.home .main-navigation:not(.navigation-clone) { background-color: transparent; position: absolute; width: 100%; top: 0; }
I need for my client a transparent menu but when do scroll down the background become a solid colour (like in this example http://seventhqueen.com/themes/kleo/black-friday/)
I know you’re working in this add-on but… When you can introduce this ? I need soon! One month, perharps ? This is a important trend in this 2016
Thanks Tom
Dani
https://about.me/aticbcnFebruary 27, 2016 at 9:56 am #175709Tom
Lead DeveloperLead DeveloperComing very soon ๐
Can I see your website so I can make it work for now?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 27, 2016 at 11:31 am #175739Dani
Hi Tom
Ok, great !
This add-on will be for a client website, perharps too in my website, but if you can see my site ( the CSS code right now is not inserted) this is:
http://bit.ly/Aticwebbcn
Do you need I put in the code in a Custom CSS ?
Thanks !
DaniDani
https://about.me/aticbcnFebruary 27, 2016 at 11:14 pm #175829Tom
Lead DeveloperLead DeveloperSince we’re on the home page, you can do this:
.home .site-header { position: absolute; width: 100%; top: 0; z-index: 999; background-color: transparent; }
Then you might want to remove the background color from the menu items as well.
Let me know ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 28, 2016 at 1:23 am #175850Dani
Hi Tom,
Yes… I want the menu background transparent too.
I tried through customizer but only can put a color, if you have a custom code…Thanks!
DaniDani
https://about.me/aticbcnFebruary 28, 2016 at 10:56 am #175921Tom
Lead DeveloperLead DeveloperSimply deleting the color value will make it transparent ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 1, 2016 at 1:05 am #176239Dani
Hi Tom,
Ok this option but if you use a sticky menรบ, it will be transparent too… and this a problema when you do scroll becouse texts are mixed with the (transparent) menรบ !
If don’t use sticky menรบ the solution is good.
Thanks!
DaniDani
https://about.me/aticbcnMarch 1, 2016 at 11:29 am #176369Tom
Lead DeveloperLead DeveloperAh, good point – okay, re-add your colors using the Customizer.
Then you can try something like this:
.home .main-navigation:not(.navigation-clone), .home .main-navigation:not(.navigation-clone) .main-nav ul li a { background-color: transparent; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 1, 2016 at 11:48 am #176390Dani
Ok thanks Tom !
DaniDani
https://about.me/aticbcn -
AuthorPosts
- You must be logged in to reply to this topic.