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

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

Home Forums Support Is it possible a diferent background for sticky menu?

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #174184
    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

    RMR

    #174205
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #174214
    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

    RMR

    #174310
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #174324
    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

    RMR

    #174452
    Tom
    Lead Developer
    Lead Developer

    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.

    #174499
    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

    RMR

    #174545
    Tom
    Lead Developer
    Lead Developer

    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 5 years, 7 months ago by Tom.
    • This reply was modified 5 years, 7 months ago by Tom.
    #174576
    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

    RMR

    #174584
    Tom
    Lead Developer
    Lead Developer

    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.

    #174622
    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

    RMR

    #174716
    Tom
    Lead Developer
    Lead Developer

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

    #174732
    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

    RMR

    #174961
    Tom
    Lead Developer
    Lead Developer
    #175171
    rtomc

    Done !!

    You’re the only one !

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

    You have a beer in Barcelona πŸ˜›

    RMR

    RMR

Viewing 15 posts - 1 through 15 (of 24 total)
  • You must be logged in to reply to this topic.