GeneratePress Split: Move centered Logo to the left

Hello again,

I've uploaded a photo to explain what I'm trying to do: https://davidsievers.eu/wp-content/uploads/2022/08/Folie1-1.jpeg

This is surely quite simple stuff but I'd appreciate any help.

Thanks

Hi there,

so if you want the standard navigation layout with logo to the left and primary nav to the right then:

1. Go to Customizer > Additional CSS and delete:

.site-branding,
.site-logo {
	position: absolute;
	left: 50%;
  transform: translateX(-50%);
	z-index: 200;
}

and delete this:

#site-navigation {
	float: none;
	width: 100%;
}

.main-navigation .main-nav,
.main-navigation .menu-item-separator{
	flex-grow: 1;
}

.main-navigation .menu-item-separator a {
	font-size: 0;
	background: transparent !important;
}

.slideout-navigation .menu-item-separator,
.main-navigation.toggled .menu-item-separator{
	display: none !important;
}

@media (max-width: 768px) {
	.inside-header>:not(:last-child):not(.main-navigation) {
		margin-bottom: 0;
	}
}

2. In Appearance > Menus delete the empty Separator Menu item.

Hello David,

that worked, thank you! I have three other questions that I need to ask.

1. How can I remove the menu items and replace them with a burger navigation at the right side of the navigation bar? Here's an image: https://davidsievers.eu/wp-content/uploads/2022/08/menu-new.jpeg

2. Is there a way to make the anchor-linked entries in the nav-bar change their color when hovering (like when linked to other pages, not anchor-links) ?

3. Also - this is another topic actually - I'd like to format links on the whole site with an underline in a specific color (on the pages, but also in blog entries). Can you tell me how I can achieve this?

Thanks again!

best,
David

Hi David,

1. You can set a high value eg.999999px for the mobile breaking point, you can find the setting at Customizing > Layout > Primary Navigation.

2. It will require some custom CSS. Can you give this CSS a try?

.main-navigation.toggled .main-nav li:hover a {
    color: red;
}

If it doesn't work, can you link us to your site?

3. Since it's not related to this topic, could you open a new topic for this? It will be easier for us to manage and archive the topics. Thanks for your understanding!

Hi Ying,

thanks, but that didn't do it for the underline. I linked to my site in the details.

Best regards,
David

Hi David,

Are you referring to #3 in your response? If so, can you start a new topic as mention by Ying for this?

Hi Fernando,

no, this related to #2.

Best,
David

The code provided by Ying seems to be working: https://share.getcloudapp.com/geuRNQNg

How did you add it?

I've added the CSS in the additional CSS field in the customizer. Should I have done it differently?

Seems like a caching issue. I can see the hover change in color if I turn off cache. Try clearing your cache. If that doesn’t work, try temporarily disabling all caching/optimization plugins you have to test.

Ok, I'll do that - thanks!

You’re welcome David!

Hi Fernando,

thanks again, the hover color changes fine when the toggled menu is activated. However, I was wondering how to change the hover color in the default navigation bar (with all menu items showing).

I've tried different methods in CSS but to no avail.

Best,
David

Have you tried changing the hover color in Appearance > Customize > Colors > Primary navigation?