How to Left Align Navigation Links

Elizabeth Abernathy
(@elizabeth-abernathy)

9 years, 1 month ago
Hi There – I have searched around and tried a few different things, but nothing is working. This blog has has many hands in the pot (so to speak), so the whole thing could be a mess. The blog is at:

http://real-estate-in-tahoe.com/

I am trying to align the navigation to the left or find a way so that it does not wrap around into 2 lines. I tried changing the font size and then adding the following code to the style.css file:
```
#site-title {
   margin: 0;
   text-align: left;
}
```
which did not work. So now I am not sure what to do. Any help would be appreciated. Thanks so much. -Beth

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

Thread Starter Elizabeth Abernathy
(@elizabeth-abernathy)

9 years, 1 month ago

I found the place to edit the navigation font size. The menu structure is a bit cumbersome. I am looking forward to starting a new theme from scratch 🙂

Thread Starter Elizabeth Abernathy
(@elizabeth-abernathy)

9 years, 1 month ago

I am still having an issue with this navigation. My last resort was to make the links smaller as they were wrapping around in the navigation creating 2 lines. On the main site i.e.:

http://www.ttahoe.com/

The primary navigation is laying out the way it is supposed to. I am wondering for the blog:

http://real-estate-in-tahoe.com/

Can I make the links larger to match the main site or am I stuck with the very small links?

I have a line of code from the main sites’ style sheet and I am wondering if I add that in, would that help i.e.:

<link href="http://www.ttahoe.com/styles.css" rel="stylesheet" type="text/css">

Any ideas would be greatly appreciated. Thanks, Beth

CrouchingBruin
(@crouchingbruin)

9 years ago

Hi, Beth:

Well, it’s going to be difficult to prevent the menu from wrapping. The main site is a fixed-width layout, meaning it doesn’t change with different view port widths. You can see that if you make the browser window narrower, the layout doesn’t change. While this is nice from the standpoint of not having the menu wrap, it’s not very mobile-friendly, i.e., your users on a tablet or a cell phone are going to have a hard time reading and navigating the site because they’ll have to zoom in and scroll around.

The Twenty Eleven theme is mostly responsive, meaning the site will adjust itself to look readable on different view port widths. The main problem, though, is that it doesn’t come with a mobile menu. have you considered switching to another theme, like Twenty Twelve? Twenty Twelve has a mobile menu, so once the view port falls below a certain width, the mobile menu will appear. And one nice thing about WordPress themes is that you can switch back & forth between themes without losing anything, so if you decide you don’t like Twenty Twelve, you can switch back to Twenty Eleven.

Which reminds me: You should avoid making changes directly to the theme files, like style.css. If the theme gets updated because of feature enhancements, bug fixes, or security patches, or if the theme has to be updated because of a change to the WordPress core, then your changes will be lost. Instead, either create a child theme or use a CSS plugin like Jetpack or Custom CSS Manager. A CSS plugin is probably the best if the only changes you are making is to the CSS. At the very least, make a copy of every file that you’ve changed and store it away somewhere. You don’t want to see your hard work lost.

Finally, you can try making the site fixed-width like the main site, but it will be harder to read on a mobile device.

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

The topic ‘How to Left Align Navigation Links’ is closed to new replies.