[Resolved] have my logo stand out or float when centered in navigation menu

Home Forums Support have my logo stand out or float when centered in navigation menu

Viewing 15 posts - 1 through 15 (of 29 total)
  • Author
    Posts
  • #308592
    Patrick

    Hello i wanted my logo centered in navigation menu which worked after i read and applied procedure in other support you ansered. Now my problem is i would like it to stand out of the navigation section see http://www.harvard.edu/ for example of what i would like. So my problem is that with the logo in navigation section becomes very high so it tends to adjust to bottom of logo. My web site is https://www.larmure.ca

    thx for your help

    Patrick
    p.fortin@larmure.ca

    #308628
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try this:

    li.centered-navigation-logo {
        width: 150px;
        height: 100px;
    }
    
    li.centered-navigation-logo img {
        position: absolute;
        left: 0;
        z-index: 999;
    }

    Then you should be able to increase the menu item height to fill the empty white area a bit: https://docs.generatepress.com/article/menu-item-height-width/

    #308645
    Patrick

    Thx works perfectely and last question how can i manage to have it desaper when start scrolling so the sticky menu smaler logo does his job

    #308779
    Tom
    Lead Developer
    Lead Developer

    Try this:

    .navigation-stick li.centered-navigation-logo {
        display: none !important;
    }
    #308793
    Patrick

    thank you so much. From here I will manage to tweek the the rest. You guys are so present for us. 1000 times thx. Keep up your extra work.

    #308810
    Tom
    Lead Developer
    Lead Developer

    You’re welcome! Glad I could help 🙂

    #309295
    Patrick

    Hello again. I tried hard having a simplified version of my logo take place of main logo when start scroling. To try so i used your advice on previous help you gave me on this topic but i ended up having some weird things going on. so i ereased all css you gave me to restart my process then saved and refreshed. Funny part is that centered logo still appears with no css in.

    I though i was good to settle this but guess i still not pro enough 🙁

    y is it that with no css logo stil apear in centered menu and how should i proced to have main logo on page load and when start scroling simplified logo appears.

    Thx for helping again

    #309314
    Tom
    Lead Developer
    Lead Developer

    It still appears because it’s still added as a menu item. The CSS simply styles it a bit so it looks better. If you want to remove it, you’ll need to remove the menu item containing it.

    To have the main logo on load, you would upload it in Customize > Site Identity.

    Then for a more simple logo while scrolling, you would use the Navigation Logo in Customize > Layout > Primary Navigation.

    Let me know if you need more info 🙂

    #309324
    Patrick

    yea with Customize i will then be in regular mode but i still want every thing centered in my main menu but want mail logo to desapear when start scroll and ahter logo version to take place when have started scrolling. I created 2 different logo in menu item tried different things but cant get logoes the switch when start scrolling.

    Thx again

    #309329
    Tom
    Lead Developer
    Lead Developer

    Are you still wanting your logo in the center of the navigation? So two different logos in the center of your navigation, one for sticky and the other for now?

    #309337
    Patrick

    yes centered in main menu but when i start scroling kind of sticky menu takes place of main logo with a simplified logo but still in center of menu tabs.

    Thx

    #309341
    Patrick

    so my guess is having 2 menu items and code to turn them off or on

    but just can not find the right css to add
    🙂

    #309342
    Patrick

    just like the harvard website but no shrink of my other menu items gust action on the logo
    http://www.harvard.edu/

    #309462
    Tom
    Lead Developer
    Lead Developer

    Hmm ok, you would have to add a second menu item with your sticky logo. So you would go through these instructions again: https://docs.generatepress.com/article/centering-logo-navigation/#add-your-logo-to-the-navigation

    The only change you would make is adding one more class to the menu item: centered-sticky-logo

    Then you could add this CSS:

    .centered-sticky-logo {
        display: none !important;
    }
    
    .navigation-stick .centered-sticky-logo {
        display: inline-block !important;
    }
    #309666
    Patrick

    solutions looks good to me but i have a major problem. It seams that my main page is constently in sticky mode because as soon as i activate css commands for sticky conditions they are all applied immediatly even i dont start scroling

    maybe would you like to have administrator acces to my backend

    thx again and so sorry taking your time for this.

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