Header's CSS doesn't work in Chrome and Opera - any ideas how to fix it?

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: .png (everything's fine) Chrome (in Opera it looks the same): .jpg (menu items are not aligned properly).

Here's my site: /

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

Kacper

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/uVTtT.png (everything's fine) Chrome (in Opera it looks the same): https://i.sstatic/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.

Kacper

• css
• google-chrome

Share Improve this question asked Dec 3, 2018 at 2:27 kacper3355kacper3355 7722 silver badges99 bronze badges 10

• 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). – Nathaniel Flick 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. – Nathaniel Flick Commented Dec 3, 2018 at 3:23
• Hmm, here's all my code related to that header: pastebin/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

 |  Show 5 more comments

2 Answers 2

Sorted by: Reset to default 0

Try this change to CSS. Replace:

.site-title a img{
    padding-bottom:8px;
    padding-top:8px;
    height:50px;
}

with:

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

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

Explanation

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.

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.

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

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

https://codepen.io/dirtandrust/pen/MzRaQQ