1

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

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 Dec 3 '18 at 2:31
  • How can I do that? I'm not sure if I understand what you mean. – kacper3355 Dec 3 '18 at 2:33
  • Also, sorry for stupid questions - I just started to learn CSS. – kacper3355 Dec 3 '18 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 Dec 3 '18 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 Dec 3 '18 at 3:41
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.

5
  • 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 Dec 3 '18 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. – Frank P. Walentynowicz Dec 3 '18 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. – Frank P. Walentynowicz Dec 3 '18 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 Dec 3 '18 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. – Nathaniel Flick Dec 3 '18 at 20:01
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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