Navigation Bar in Mode Theme wrapping

tumbleweedus · Member · Nov 3, 2015 at 2:58 pm
Copy link

Add topic to favorites
Hello. My navigation bar/menu at the top of my website is wrapping to a second line. I would like my menu items to be on one line. How do I do that? Thank you!

The blog I need help with is: (visible only to logged in users)
harishankerr · Member · Nov 3, 2015 at 5:32 pm
Copy link
Hi there, @tumbleweedus,

That’s a great-looking blog that you’ve got there!

As for your issue, the width of the menu item in your theme is fixed – i.e. there is a limit to the number of items you can post there. So, I’m afraid there’s no ‘easy’ way to fit all the items in a single line.

However, you may want to add a few items as ‘child-menus’ (like you’ve done for ‘humor’, ‘pet’ and ‘custom’, so that all the others fit in a single line.

I hope this helps.

– Hari.
tumbleweedus · Member · Nov 3, 2015 at 5:53 pm
Copy link
thank you very much for the response.

is there not a bit of CSS I could use for the nav bar to slightly elongate the menu? My issue is – we sell our mugs based on category and the categories I’ve listed in my menu bar are what we are known for regarding how we break our mug collections.

If there’s any CSS you could pass along, I sure would appreciate it.

thanks so much for your time & help. truly
harishankerr · Member · Nov 3, 2015 at 6:12 pm
Copy link
@tumbleweedus

Hi, I just checked the CSS of your site. It seems that the menu of your site occupies 67% of the space while the heading occupies 33%. You can increase the size of your menu by changing the CSS classes for your menu as well as your heading accordingly.

However, please note that CSS editing is only for the Business plan of WordPress.com. If you’re using the Business plan, search for the class ‘.main-navigation’. It’s currently somewhat like this:
```
.main-navigation {
    float: right;
    width: 67%;
}
```
Change 67% to something like 75%. Also, search for the class ‘.site-branding’, and change it to 25%.

The existing code would look somewhat like this:
```
@media screen and (min-width: 768px)
.site-branding {
    float: left;
    width: 33%;
}
```
Ideally, this should help. :)

Also, please make it a point to save your existing code beforehand, to make any corrections in case of mistakes.
tumbleweedus · Member · Nov 3, 2015 at 6:16 pm
Copy link
You’re the man!

THANK YOU!
harishankerr · Member · Nov 3, 2015 at 6:33 pm
Copy link
You’re welcome! :)

No items found.