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

Question

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

kacper3355

2018年12月3日 20:27

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.imgur.com/4U11dfN.png (everything's fine) Chrome (in Opera it looks the same): https://i.imgur.com/kkyeklc.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

Topic google-chrome css Wordpress

Category Web

Nathaniel Flick · Accepted Answer · 2018年12月3日 20:27

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

Frank P. Walentynowicz · Accepted Answer · 2018年12月3日 05:58

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.

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

Explanation

About