I am creating a Wordpress site, but I have a problem with desktop version of Chrome and Opera - my header displays differently here (in all other browsers everything works just fine).

Here are screenshots showing what I mean:

Firefox: https://i.sstatic.net/uVTtT.png (everything's fine) Chrome (in Opera it looks the same): https://i.sstatic.net/49u32.jpg (menu items are not aligned properly).

Here's my site: http://tophistorie.pl/

Do you guys have any ideas what could go wrong? I'm desperate for help - tried to figure it out for 2 hours.


  • Put that GMING logo in your nav list. Right now it's floated left and so won't take that nav list into consideration in the flow of the doc (and so it gets covered up). Commented Dec 3, 2018 at 2:31
  • How can I do that? I'm not sure if I understand what you mean.
    – kacper3355
    Commented Dec 3, 2018 at 2:33
  • Also, sorry for stupid questions - I just started to learn CSS.
    – kacper3355
    Commented Dec 3, 2018 at 2:43
  • It's easier to help you if you post code here, but basically look for the nav <ul> and put that logo in the first <li> and that should sort it. Commented Dec 3, 2018 at 3:23
  • Hmm, here's all my code related to that header: pastebin.com/DZqs0gjf Could you please take a look? I tried your suggestion, but I'm most likely doing something wrong (no change).
    – kacper3355
    Commented Dec 3, 2018 at 3:41

2 Answers 2


Try this change to CSS. Replace:

.site-title a img{


.site-title a img {
    padding-bottom: 8px;
    padding-top: 8px;
    height: 50px;
    position: relative;
    z-index: 9;

li.menu-item-1924 {
    margin-left: 130px;


Adding margin-left: 130px; to first menu item, will move the menu, visually, to the right, away from GMNG image. The image, and the menu, will still be overlapping, so z-index: 9; will put the image above the menu. For z-index to work, position: relative; is required.

  • Hey! Unfortunately, it doesn't work so well. It fixes logo in Chrome and Opera, but breaks in Firefox (theres a huge gap between and menu items).
    – kacper3355
    Commented Dec 3, 2018 at 13:52
  • Try to remove <h1> element with logo, and in a menu designer, add, as first menu item, a custom link with 'url' = '/', and text = '<img style="height: 14px" src="tophistorie.pl/wp-content/uploads/2018/11/gmn6.png" alt="Mój pierwszy blog">'. You may adjust 'height' in style to a desired value. This will align your logo with other menu items. Commented Dec 3, 2018 at 14:43
  • Also,as a Polish language purist, I would recommend changing text of two menu items: NEWSY -> NOWINY (NOWOŚCI, or WIADOMOŚCI), ENTERTAINMENT -> ROZRYWKA. Commented Dec 3, 2018 at 14:51
  • I already fixed it by adding other custom CSS. However, thank you for your time. PS. this is just a test site, nothing will ever be there - I will translate these elements on my live site :)
    – kacper3355
    Commented Dec 3, 2018 at 19:50
  • This creates a problem on mobile screens so I don't agree it's the best answer. Put the logo in with the other nav items in the ul and you're better off. Commented Dec 3, 2018 at 20:01

You want the nav unordered list to contain your logo, then it takes up space with the other nav items instead of faking it by using a left margin on the nav list which you then have to compensate for later to make your nav responsive.

    <li>Logo here</li>
    <li>Nav item here</li>
    <li>Nav item here</li>
    <li>Nav item here</li>

Check out the code on codepen that's a bit more descriptive than what I've posted here in my answer:


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.