Keeping the main menu to one line

Resolved shewenttospain
(@shewenttospain)

7 years, 10 months ago

Hi,
I have 10 headings in Menu 1 (the gray bar under the header picture) and they have spilled onto 2 lines. How can I change the font size automatically to make sure all of my headings stay on one line, no matter how many I add or what size the screen is? It looks strange and is less user friendly to have my headings on two lines… My website is http://www.shewenttospain.com if you need to see it. Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)

Saurabh Saneja
(@saurabhsaneja)

7 years, 10 months ago
For now you can add this css:

.main-navigation a {
padding: 8px 10px !important;
font-size: 15px !important;
}

You can reduce padding 10px and/or font-size if you add more menu items.

You can do all the padding, margin without knowing the code using this styling plugin:
https://wordpress.org/plugins/yellow-pencil-visual-theme-customizer/

🙂
- This reply was modified 7 years, 10 months ago by Saurabh Saneja. Reason: additional information
Thread Starter shewenttospain
(@shewenttospain)

7 years, 10 months ago

Thanks, that code worked perfectly! My only fear is that it won’t work on all size screens. Does the plugin help it stay to one line on all size screens? Thanks again for the helpful response!!!

Saurabh Saneja
(@saurabhsaneja)

7 years, 10 months ago

The plugin is like a font end page build i.e. visual composer etc
It can be used again if new menu pages go on new line.

You need to google the permanent solution for this.

Thanks,

Saurabh

Theme Author marcusfrontender
(@marcusfrontender)

7 years, 10 months ago

Hello @shewenttospain. Thank you for using blogsixteen.

I would suggest you to reorganize the menu and add more links to a parent link instead. The next version of blogsixteen will let you add a footer menu and there will also be some visual adjustments allowing to fit in more links.

vpouncey
(@vpouncey)

7 years, 6 months ago

Hello,

My website uses Responsive Theme and my menu bar is on two lines. I tried to add the code above but it didn’t work.

Please help.

Saurabh Saneja
(@saurabhsaneja)

7 years, 6 months ago

Maybe you could change the breakpoint and make your menu look like mobile menu earlier

This is just an example. I am using a commercial theme

https://wpexplorer-themes.com/total/docs/alter-mobile-menu-breakpoint/

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Keeping the main menu to one line’ is closed to new replies.

Tags