[devideomakersParticipant]

Hi there! For our website http://www.devideomakers.nl we keep on having the same problem:
When you watch our site on a smaller device, the logo goes over the menu, which looks ugly.
Is it possible to make the logo shrink with the screen getting smaller?

Or to make the menu items shrink along, so they won’t go under the logo?

Thanx!

[JoaoModerator]

Hi There,

Please add the following code to Appereance Customizer Custom CSS

@media(min-width: 770) and (max-width: 1200px) {
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
     font-size: 10px;
}
.x-brand img {
    width: 150px;
}
.x-navbar {
 
    height: 83px;
}}

Hope it helps

Joao

[devideomakersParticipant]

Thanx, I tried applying this to our CSS but it didn’t work. Maybe I put it in the wrong place. Could you show me where to put it exactly?

[Paul RModerator]

Hi,

You can add it under WP Dashboard > Appearance > Customize > Custom > Edit Global CSS

https://www.screencast.com/t/i5KK9upxmWqD

[devideomakersParticipant]

Ah, yes then I did put it in the right place. It doesn’t change anything in the website and menu bar for as far as I can see.. Still the logo sometimes goes over the menu items.

[Paul RModerator]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 1075px) {
.x-nav-wrap.desktop {
    display: none;
}

.masthead-inline .x-btn-navbar {
    display: block;
    float: right;
}

.x-nav-wrap.mobile {
    display:block;
}

.x-nav-wrap.mobile.collapse {
   display:none;
}

.x-nav-wrap.mobile.collapse.in {
   display:block !important;
}
}

Hope that helps

[devideomakersParticipant]

Hi Paul! Thanx for helping me out – but unfortunately this doesn’t seem to work. Still part of the time the menu items go under the logo, making the menu bar stretch.

Would there be anything else I could try?

[JoaoModerator]

Hi There,

Please replace the provided code by paul with:

@media (max-width: 1075px) {
.x-nav-wrap.desktop {
    display: none;
}

.masthead-inline .x-btn-navbar {
    display: block;
    float: right;
}

.x-nav-wrap.mobile {
    display:block;
}

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 11px;
    padding-left: 10px;
    padding-right: 10px;
}}

Hope it helps

Joao

[devideomakersParticipant]

Hi Joao, thanx for looking into this problem with me. Unfortunately still it doesn’t solve it.

Maybe I haven’t stated the problem clear enough? Thing is as follows. On a wide screen the menu bar looks like the first picture. But when the screen get’s smaller it goes to the second picture (menu items under the logo – ugly!) and when the screen get’s even more smaller, it goes to the third picture (with the menu fully folded in)

[devideomakersParticipant]

Ah wait, I did implement the last code in the wrong way, something does change!

But it still goes in a weird way in between stages (picture 2). With the menu items under each other, taking too much space as well.
Maybe it’s better if it goes from picture 1 to picture 3 at once?

[devideomakersParticipant]

This is picture 2

[JoaoModerator]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks!

[devideomakersParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

I went ahead and updated the code.

This is how it works on my end.

See Video – https://www.screencast.com/t/zcves9Z0Ix

[devideomakersParticipant]

This reply has been marked as private.

[Author]

Posts