[Resolved] Is it possible a diferent background for sticky menu?

[rtomc]

Hy,

I’m trying to get a main menu nav as this exemple: http://www.tufoodtruckfavorita.com/

Normal position of main menu nav
Background color: transparet showing the image below
font color: white

Sticky position of main menu nav
Background color: white
fotn color: black

Is it possibole with GP + addon?

Thanks…

RMR

[Tom]

Will every single page have an image in the header so the transparent navigation with white menu items are visible?

If not, you can specify pages to make the header blend in:

.home .site-header {
    position: absolute;
    width: 100%;
}

Let me know 🙂

[rtomc]

Hy Tom,

Thanks a lot (specially being sunday)

Yes, I’m testing using a header image in each page, but this does not seem a good solution because first show the menu and then, below, the header image.

And… I need that the main menu nav behave in two diferents way, one (in home page) being transparent and with color font white, and another one (the sticky) with de color backgroung white and the color font black.

OK

I can show you the test:

1. Home page. With sections. Without header, with main menu nav.

test

I just need this menu transparent and over the image. And when the scroll shows the sticky, that this be white whit the color font black.

Any sugestion?

Thanks again.

R

[Tom]

Ah, the code I gave you targets the home page, not this internal page.

So for this, your CSS would be:

.page-id-499 .site-header {
    position: absolute;
    width: 100%;
}

499 being the ID of your page.

This is going to be an option in the rebuild of Page Header 🙂

[rtomc]

OK Tom, thanks a lot,

I put the css into style.css but nothing 🙁 and I understand that this css is only for page id=499.

Now the main menu nav settings are color background white and font color black.

Then, the qüestion is that this main menu nav, only at home page (in this case id=499), can become transparent and show under the options of the menu the image of the first section.

I tested al lot of combinations, with header, without, with padding, without, hiding header, showing it…

Any suggestion more?

Thnaks for your atenttion

RMR

[Tom]

Can you see if this topic helps?: https://generatepress.com/forums/topic/styling-main-nav-and-sticky-nav-seperately/#post-157194

This is a feature that is planned in the future, but it is a very involved feature so it’s tough to get perfect in the forums.

[rtomc]

Hy Tom,

Yes !

The topic you share me was really useful !

I changed post item and it works now perfect.

But… If possible, the last one with this question.

Now I have this css code:

.home .main-navigation:not(.navigation-clone) {
background-color: transparent;
position: absolute;
width: 100%;
top: 50;
}

I tried change (and this I did not ask you before) the font color. I tried adding “font-color: r#21759b;” but without results.

How can I change too the font color?

Thanks Tom: you’re the soul of GP

Ramiro

[Tom]

Try this:

/* link */
.home .main-navigation:not(.navigation-clone) .main-nav ul li a {
    color: #21759b;
}

/* current link */
.home .main-navigation:not(.navigation-clone) .main-nav ul li.current-menu-item a {
    color: #21759b;
}

/* link on hover */
.home .main-navigation:not(.navigation-clone) .main-nav ul li a:hover {
    color: #21759b;
}

• This reply was modified 8 years, 1 month ago by Tom.
• This reply was modified 8 years, 1 month ago by Tom.

[rtomc]

Thanks again, thanks always ,

The only line that is working correctly is this one.

/* current link */
.home .main-navigation ul li.current-menu-item a {
color: #21759b;
}

I tried some things before write you, but… without success 🙁

If you has any suggestion would be perfect 🙂

Thanks again,

RMR

[Tom]

I just adjusted the code: https://generatepress.com/forums/topic/is-it-possible-a-diferent-background-for-sticky-menu/#post-174545

Also, the above will only work on the homepage.

If you want it to work on another page, you need to replace .home with .page-id-xx – xx being the page ID.

[rtomc]

Uf !

I’m sorry !!

This last code works in home page, but then overrides (does not obey) the instructions of GP/Color/Navigation Colors and the colors of main nav (background and font) are always the same that home page.

Abusing your patience, any more suggestion?

Thanks again, for all.

RMR

[Tom]

I’m not too sure what you mean? Can you show me a screenshot of what you’re seeing?

[rtomc]

Sorry by my english 🙁

I try:

WORKS CORRECTLY

image 1
It’s a inside page.
It shows the normal main menu nav

image 2
It’s the same inside page.
It shows the normal main menu nav in sticky position.

I can manage them from GP/Colors/navigation Colors

image 3
It’s the home page.
It shows the main menu nav being transparent with text in white. OK
I put this attributes from your css notes.

HERE WE FIND THE PROBLEM
image 4
It’s the home page showing the main menu nav in sticky position.
The font color and the background color are white and then, the text is invisible.

Here you can find the images:
http://catalunyastreetfood.cat/Tom/Image_1.jpg
http://catalunyastreetfood.cat/Tom/Image_2.jpg
http://catalunyastreetfood.cat/Tom/Image_3.jpg
http://catalunyastreetfood.cat/Tom/Image_4.jpg

If you considered ok, I can share you an admin acces.

Thanks for all.

RMR

[Tom]

Can you try this code?: https://generatepress.com/forums/topic/is-it-possible-a-diferent-background-for-sticky-menu/#post-174545

[rtomc]

Done !!

You’re the only one !

Thanks a lot, for atenttion, for patience, and for solutions !!!!!

You have a beer in Barcelona 😛

RMR

[Author]

Posts