How do I get my WordPress header to not wrap onto a second line but rather into a “more” button when the screen size shrinks?

[ad_1]

Hi. I am having one of two issues and would love some help. I am using the standard WordPress header instead of a header plugin because I like the way it looks on my site. However I am having some challenges customizing it as I am not well-versed in CSS / coding.

First, when the window size shrinks, my tabs start going onto a second line, but I think that makes the header look ugly. Is there a custom code or plugin I can get to make the menu items not go into a second row but rather filter into a “More” drop down menu?

Second, I have a contact “button” on the top right of my page which I like. however when the screen size shrinks again the text wraps onto 2 or 3 lines even though it’s only one word. For example, it looks like this:

CO

NTA

CT

How do I fix it so it doesn’t wrap like this!! Also, it doesn’t show up on mobile (obviously because its technically a button and not on the regular menu). How to I add it to the menu just for the mobile/tablet?

Bonus question – how do I change the header color on JUST my Blog posts?

[ad_2]
1 Comment
  1. Look up the line-clamp CSS attribute — that should do what you want for the text lines.

    To add a button only for mobile/tablet, add the button to the menu and then show/hide it using media queries. Or use a plugin to manage your mobile/tablet menu

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer