Wrap navigation tabs text

southeasttourguides · Member · Dec 11, 2014 at 4:32 pm
Copy link

Add topic to favorites
Hi
I need help in words of one syllable please. I have one navigation tab title which is too long and is throwing the whole navigation bar onto two lines which does not look good.
Can I wrap the text for the longest title so that it appears in the same ‘cell’ just as is possible in Excel?
If so, how?
Many thanks in advance

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Dec 11, 2014 at 5:40 pm
Copy link
Hi there, the menu is an unordered list and not like cells in a spreadsheet. We can force a narrower width of the li elements, but when we do that, things can really get wonky and confusing for visitors. What I would recommend is to reduce the padding on the text elements within the menu (see my caveat below).
```
#access a {
    padding-left: 0.7em;
    padding-right: 0.7em;
}
```
The caveat: Since your theme is flexible in width, the menu will again go to two or more lines when the site is viewed on narrower screens or browser windows. You can see this by narrowing your browser window and watch what happens to the menu. So, that means that the above adjustment will keep it from happening down to narrower browser window settings, but is not a permanent solution.
designsimply · Member · Jan 13, 2015 at 12:24 pm
Copy link
Another CSS snippet that you might like is something that will center the menu as a whole for the desktop view. Here is an example you can try by adding it to your Appearance > Customize > CSS editor in addition to the CSS thesacredpath posted for you above:
```
#access {
	text-align: center;
}

#access ul {
	display: inline-block;
}

#access li {
	text-align: left;
}
```
Also note that you can adjust either of the 0.7em numbers until the menu looks the best to you.
southeasttourguides · Member · Jan 13, 2015 at 1:54 pm
Copy link
Thank you both for your assistance, I have added both snippets to the website and it does look a lot better.

As I think the website is being viewed more and more on mobiles (cell phones), is there a better, more mobile-friendly theme that I should consider using?
I’d be interested in your thoughts on this
designsimply · Member · Jan 14, 2015 at 3:57 pm
Copy link
I checked out http://southeasttourguides.co.uk/ on a small screen, and I think it actually looks pretty good! You might be able to get away with a few adjustments in the CSS using media queries if you’re interested in trying that out.
http://en.support.wordpress.com/custom-design/custom-css-media-queries/

That said, there are also some great looking responsive designs that have come out after Coraline came out, and you might find one you love! All of the newer themes released these days have a responsive design. You might want to go to Appearance > Themes in your blog dashboard and try previewing a few. You can use the search box at the top of the themes page to search for “responsive” to make extra sure you’re seeing all responsive themes. Once you’re in the preview mode, you can use the buttons at the bottom of the live preview screen to approximate how the design will look for tablet and mobile sized views which is really handy.

No items found.