[Resolved] move the logo to the corner

[makaouif]

Hello
Please i want to move the logo to the corner as in the image attached screenshot (1) and i want to aline the menu as in image attached (2).

https://drive.google.com/file/d/1TjvuuRLx6iScNJP2KEYsEZ94y1rlp8kX/view?usp=sharing
https://drive.google.com/file/d/1G1ZRzFIivSUCW7iByxorVKcTla5r514H/view?usp=sharing

[Leo]

Hi there,

Can you start by setting the navigation location to float right?
https://docs.generatepress.com/article/navigation-location/

Let me know 🙂

[makaouif]

done
but it move to the extreme right, you can check

[Leo]

Looks like you’ve set the alignment to right.

Can you try location float right first?

Also I’m seeing a merged header element. Is that necessary?

[makaouif]

Thank you for you answer Leo
i don’t think that i do it correctly (i dont know how to use filter) , but thats what i put in Customizing > Additional CSS
—————–
add_filter( ‘generate_navigation_location’,’tu_move_navigation’ );
function nav-float-right( $location )
{
return $location;
}
———————-
please advice

[Elvin]

Hi,

WordPress filters are PHP codes.

For them to work, you have to add them as such.

Here’s how to add PHP codes to your site.
How to add PHP

Let us know how it goes.

[makaouif]

Thank you Elvin
I already using a child theme, and i add the filter in functions.php.

add_filter( 'generate_navigation_location','tu_move_navigation' );
function tu_move_navigation( $location )
{
		
	return $location;
}

Where should i put nav-float-right

[David]

Hi there

you should not need that PHP Snippet.

1. Go to Customizer > Site Identity and display the Logo.
2. Go to Customizer > Layout > Header and select Navigation as Header.
3. Go to customizer > layout > Priamry Navigation and set the Alignment to Center.

Let me know.

[makaouif]

Thank you David
The logo appear very small becouse it’s in the menu bar

what i want is to put it the zone as it appear in the photos attached.

https://drive.google.com/file/d/1TjvuuRLx6iScNJP2KEYsEZ94y1rlp8kX/view?usp=sharing
https://drive.google.com/file/d/11cNrKnDjcCWY8yYDY_D2FKs1fcxjSoc1/view?usp=sharing

[David]

The size of the logo inside a Navigation is controlled by the Menu Item Height in Customizer > Layout > Primary Navigation. Increase that size to 60px to see the difference.

If you want to increase the size of logo independent of the menu item height then add this CSS:

.navigation-branding img {
    height: 60px;
}

But i recommend you do increase the Menu Item height as currently 27px is very small and Google will complain about Clickable Elements being too close together. We recommend 60px.

[makaouif]

Thank you David for your assistance and help
1) When i put to increase the size of logo independent of the menu item the height it drive the bottom line of the menu with the logo as in the image attached

.navigation-branding img {
    height: 90px;
}

2) and what i expected and i want is to increase the size of logo independent of the menu item height as in image here

3) i’m asking if the is possibility to put the margin-right & and padding of the logo (0) as in the image here

https://drive.google.com/file/d/1F4edt-LkVRpntkvlcwraMNufLAxKKAzW/view?usp=sharing

https://drive.google.com/file/d/1OYH_ejCtATM8z-a7r3zY4luW9HrfjuNK/view?usp=sharing

https://drive.google.com/file/d/1aL83x2EaAOik1hxMhv01IJF_X00QhSR-/view?usp=sharing

Regards

[David]

Try adding this CSS to make the logo overlap the Nav and the header element:

.main-navigation .inside-navigation {
    max-width: 500px;
    position: relative;
}
.main-navigation .inside-navigation .navigation-branding img {
    position: absolute;
    left: 0;
    top: 0;
    height: 160px
}

[makaouif]

Really Amazing WoW ❤😍
Thank you very much David
one last thing if possible? Can i put the logo (overlap the Nav RTL) because when i switch to Arabic it appear on the menu button as in this image

https://drive.google.com/file/d/1E5WW0c4hvN6UPEecczEwtqheZdOS7dxs/view?usp=sharing

[Tom]

Hi there,

Give this a shot:

.rtl .main-navigation .inside-navigation .navigation-branding img {
    left: auto;
    right: 10px;
}

[makaouif]

Thank you very much Tom
it function very well 👍 🧡

[Author]

Posts