Site logo

Archived topic

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

28 replies · Started by Patrick on April 21, 2017

Viewing posts 1–15 of 29

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

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/

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

Try this:

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

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.

You're welcome! Glad I could help :)

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

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 :)

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

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?

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

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
:-)

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

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;
}

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.

This archived topic is closed to new replies.