Proper resizing of the menu with smaller screens

Illdy
1

First off, much thanks to the Illdy developers for your continual help and hard work!

I have this navigation bar for a website that I help to develop. On a normal-sized screen, there is only one row for the navigation menu (which is what I want).

However, when the screen size is smaller, the menu ends up like this:

Screenshot 2024-02-12 112821
Screenshot 2024-02-12 1128211202×154 19.6 KB

I initially thought that the issue was with the logo image size or with the div element that the image is in, but it turns out that that isn’t the case. When I shrink the image or the div, the rest of the #header div slides to the left as well, leaving the two rows intact when I need it to just be one row.

Any help would be appreciated and let me know if there is any more information that I need to give to better understand the problem! Thank you!

2

Hey there

There’s no physical space to fit menu elements. Please provide the URL of the page so we can see if we can fix it with custom CSS.

Regards,

1 Like
3

Of course! Here is the URL. Keep in mind that you have to make the window size smaller in order to encounter the issue. There is a small range between when the menu is okay and when the menu is adjusted because of the media styles. It’s in that range where the problem arises.

Once again, thank you!

4

Hi there.
​
Please add this CSS code in the Appearance > Customize > Additional CSS:

@media only screen and (max-width: 1400px){
#header .top-header .header-navigation ul li.menu-item-has-children a {
    padding-right: 16px;
}
​#header .top-header .header-navigation ul li {
    margin-left: 10px;
}
}

​Regards.

5

It worked perfectly! Thank you so much!

6

Hey there,

That’s nice to hear :slight_smile:

If you need further assistance, feel free to ask.

Regards,

1 Like