GeneratePress Split: Move centered Logo to the left

This topic has 18 replies, 4 voices, and was last updated 3 years, 8 months ago by David.

Viewing 15 posts - 1 through 15 (of 19 total)

1 2 →

Author

Posts
August 4, 2022 at 5:33 am #2303120

David

Hi there,

I’ve checked for similar topics, but couldn’t find a solution unfortunately.

I’m trying to move my currently centered logo in the navigation bar to the left and the menu items (including a button) to the far right.

Also, I want to keep the same navigation style when the user scrolls down the page. This currently switches from a transparent navigation bar background to white – and for some reason, the logo also moves from the center to the left once a user starts scrolling.

Could you please help me with that?

Thanks in advanace,
David

August 4, 2022 at 5:44 am #2303131

David

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

August 4, 2022 at 6:25 am #2303154
David
Staff
Customer Support
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.
August 4, 2022 at 7:06 am #2303179

David

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

August 4, 2022 at 10:24 am #2303479
Ying
Staff
Customer Support
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!
August 4, 2022 at 11:45 pm #2303898

David

Hi Ying,

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

Best regards,
David

August 5, 2022 at 12:03 am #2303912

Fernando
Customer Support

Hi David,

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

August 5, 2022 at 12:11 am #2303921

David

Hi Fernando,

no, this related to #2.

Best,
David

August 5, 2022 at 12:38 am #2303930

Fernando
Customer Support

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

How did you add it?

August 5, 2022 at 12:43 am #2303937

David

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

August 5, 2022 at 12:48 am #2303945

Fernando
Customer Support

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.

August 5, 2022 at 12:50 am #2303948

David

Ok, I’ll do that – thanks!

August 5, 2022 at 12:55 am #2303953

Fernando
Customer Support

You’re welcome David!

August 8, 2022 at 1:15 pm #2307213

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

August 8, 2022 at 5:53 pm #2307359

Fernando
Customer Support

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

Posts