- This topic has 28 replies, 3 voices, and was last updated 6 years, 11 months ago by Tom.
-
AuthorPosts
-
April 21, 2017 at 9:18 am #308592Patrick
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.caApril 21, 2017 at 10:40 am #308628TomLead DeveloperLead DeveloperHi 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/
April 21, 2017 at 11:38 am #308645PatrickThx 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
April 21, 2017 at 7:55 pm #308779TomLead DeveloperLead DeveloperTry this:
.navigation-stick li.centered-navigation-logo { display: none !important; }
April 21, 2017 at 8:24 pm #308793Patrickthank 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.
April 21, 2017 at 9:14 pm #308810TomLead DeveloperLead DeveloperYou’re welcome! Glad I could help π
April 23, 2017 at 8:28 am #309295PatrickHello 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
April 23, 2017 at 9:24 am #309314TomLead DeveloperLead DeveloperIt 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 π
April 23, 2017 at 9:48 am #309324Patrickyea 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
April 23, 2017 at 9:50 am #309329TomLead DeveloperLead DeveloperAre 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?
April 23, 2017 at 10:05 am #309337Patrickyes 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
April 23, 2017 at 10:07 am #309341Patrickso 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
πApril 23, 2017 at 10:09 am #309342Patrickjust like the harvard website but no shrink of my other menu items gust action on the logo
http://www.harvard.edu/April 23, 2017 at 7:30 pm #309462TomLead DeveloperLead DeveloperHmm 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; }
April 24, 2017 at 8:22 am #309666Patricksolutions 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.
-
AuthorPosts
- You must be logged in to reply to this topic.