How to avoid Menu Wrapping in the WordPress Tesseract Theme


I have been building a new, simple website over the last day or two for one of my businesses using the Tesseract Theme, a really great theme for making a nice and simple self hosted WordPress website.

I ran into the problem where my menu items were wrapping onto two lines, even though the items hadn’t used up the full width of the bar and I still have menu items I want to include at this point. Here’s what it looked like:

menu-wrapping

After searching for the last few hours for a quick fix no viable solution really showed its face so I put my limited knowledge of CSS to the test and came up with this:

#masthead {
padding-top: 10px;
padding-bottom: 10px;
}

#site-banner-left {
width: 100%;
}

Believe it or not it seemed to do the trick:

menu-no-wrapping

Now the menu makes the whole website look more sleek and professional.

To insert the code into the CSS follow these instructions:

Log into WP-Admin > Appearance > Customise > Additional CSS

Here’s the website.

Let me know if it’s helped you out in the comments below.

Advertisements

Author: Mark

Hey! I'm a 32 year old guy living in Reading, UK. I work full time for the family business as a bookkeeper amongst other things too! I have a wordpress blog - come visit my blog at markthinks.net there'a a bit of everything! :-)

1 thought on “How to avoid Menu Wrapping in the WordPress Tesseract Theme”

  1. Pingback: Test post

I'd love to read your comments:

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s