hi need help I am developing a site, If I change the width of the browser window, the menu items wrap to a second line. How would I prevent this from happening . I would like the menu items to stay on the same line and eventually switch to the mobile menu if and when needed.
can you help me to resolve this issue please
here is my website :- http://thesocialinteraction.com
menu items wrap to a second line when resizing the browser on desktop
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi bobby
One option is to increase the mobile menu collapse point to 1250. That can be done from Appearance > Theme Settings > Navigation > Mobile Menu Collapse.
HEY Andrew ….
Thanks for your quick response , I changed the value to 1250 but problem is now menu icon is stuck with the logo at certain when resizing and when browser resize further then it display on the left which is fine. Actually what I was looking for when I resize my browser can possibly navigation bar content in one line can shrink like this website:- https://www.forex4noobs.com ..
I want to display my navigation bar as long as possible while browser getting smaller and then eventually I want this to turn into mobile menu as you said in reply I can do that.
can you help me to make my navigation bar resizable like this website for example :- https://www.forex4noobs.com
We can help with the logo and mobile menu alignment.
In your Custom CSS, remove the following:
/*logo moving left*/ header#masthead.masthead-logo-in-menu .logo > img { max-height: none !important; }Next, go to Appearance > Theme Settings > Logo and disable the constraint setting.
Finally, insert the following at Appearance > Custom CSS:
@media (max-width: 550px) { #masthead.masthead-logo-in-menu .logo > img { max-height: 17px !important; padding-top: 5px; } }That’ll reduce your logo size below 550px resolution ensuring your logo and menu toggle are on the same line.
Thanks Andrew but that didn’t work as you can see I did the way you said but still mobile menu icon sticks to the very next to logo when resizing from 1250px to 1080px but after 1080px it moves to the right corner of browser , is there anyway if the mobile menu icon can be remains in right corner of browser all the time when resizing browser.? px measured in google chrome .
thanks
You can fix/change this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.
@media (max-width: 1250px) { body.responsive #masthead.masthead-logo-in-menu .main-navigation .menu-mobilenav-container ul li { float: right; } }