How to align Header and navbar in CSS (landing page)


I am developing a website (under Wordpress) with a custom theme, but I can’t get to align the logo with the menu.

he website is

How can I code this in CSS and do I have to modifiy the Theme CSS or add custom CSS?How to proceed please?

I can give a limited access to somebody to my Wordpress admin interface to solve the problem if necessary, but I need to trust the person before. (write to me).

Your navbar header is too long. I would get rid of the text by the image.

You can also make the container of navbar and menus a flexbox and give it a property called align-items:center;

Ok but the problem is that I use a custom Wordpress theme that applies/integrates automatically I can however modify its CSS properties.

Some wordpresses will allow to you directly modify css in their theme. You will have to do a research looking at the theme documentation.

Otherwise, you will need to download the css file the theme is using and directly modify the css file.

In WordPress you typically append your CSS to the end of a file called style.css found in the root of the child theme. Add a comment saying something like, /** Below all code added by “your-name” **/

As stated by others above your main menu <li> descriptions are too large. Try reducing the width of your browser to see what happens - it starts wrapping to two lines of menu items.

Also as was said, typically the child theme restricts the dimensions of the logo. The theme documentation should tell you the needed dimensions to make it fit.

The <p class="site-description">Le site N°1 Comparateur de sièges et fauteuils gamer</p> should not be visible, there is no room for it. Perhaps set it to: display: none;

Finally I note that the menu is set to collapse to the “hamburger” mobile menu at 767 pixels, so when you are designing try having your viewport width at 768 pixels, this way you will see how much room you have to work with in the worst case.