Menu items are not responsive

Heya,

I am a long time West user and a while ago I upgraded to West Pro.

I really like this theme but I have experienced always the same problems with the menu bar responsivity. I have made my menu as usual, but it is not scaling properly on all screens.

You can find my site here: http://www.opiskelijayrittajyys.fi/

The problem is that the menu isn’t responsive ever straight from the start and I have to tweak it till the point of frustration. If you scale the screen menu items don’t scale properly.

I have experienced this same thing every single time while working a site with West or West Pro. Menu items either go on two rows or go out of the screen.

I have made some changes on the bootstrap.min.css file but can’t figure out a proper way to make it work fine.

Can you help me with this and is this something that should be considered to be done to theme by default?

I really would appreciate the help!

Hello @tomirytkonen,

Please explain what exactly you want to achieve. You can provide some explanatory screenshots, you may upload screenshots to your WordPress Media Library and share a link, or you can use one of the online screenshot services.

Kind Regards, Roman.

Hello @Roman,

Thanks - it was a quick response once again from you!

There’s the link with the image which should open this thing up a little.

What I want to achieve is that the menu items could scale properly without going out of the screen (like in the middle) or on two rows (like at the bottom).

Hello @tomirytkonen,

It looks like you have this custom CSS rule:

#laitaviesti {
    position: absolute;
    top: 0;
    line-height: 10px;
}

position: absolute; is causing the scaling issue.

Kind Regards, Roman.

P. S.
I would use #menu-item-28689 ID (#menu-item-28689 > a as a selector) to style that menu item as a button.

Hi @Roman,

I got it working right and styled the button with the #menu-item-28689. Thanks a lot!

There is still one thing, the items go still on two rows when I scale the window or use a device with smaller screen.

What I mean by going on two rows is what’s in the third menu in the image I posted earlier.
I would like my menu to be in the right of the menu bar but still that it would scale properly.

You have invisible black border under current menu item that is causing this issue. I suppose that you made it black in order to make it invisible.

I suggest you to remove it with this CSS rule (instead of rule that you are probably using now to make the border black):

#site-navigation > div > ul > li > a {
    border: none;
}

Kind Regards, Roman.