Main menu position and text color

Hi Rob, I’ll answer your questions separately.

I’m looking to move the main menu to the left to keep the 6 options on a single line.

Give this a try to widen the menu:

.content-area, .main-navigation {
  width: 800px;
}

Can you explain more what you mean by moving it to the left? I’m not exactly sure where you want it. Could you perhaps sketch out what you’re trying to make it look like and post a link to the mockup here?

As some of the header images are light, and some dark, I’d like to change the menu text colour from black to white on some pages (the FAQ page is a good example where it needs to be white).

As it appears to be only the visited-link colour that’s black, you can modify that on specific pages like this:

.page-id-34 .main-navigation a:visited, .page-id-XX .main-navigation a:visited {
  color: #bb00bb;
}

page-id-34 is the unique page ID for the FAQ page, which you can find by viewing the page source in a browser and looking for the body tag. You can also see the number in the address bar when you’re editing that page. Replace XX with your next page ID, and add as many other elements as you’d like to target, separated by commas.

If you’re new to CSS, learning how to target your site’s CSS will help you make certain design and layout changes. Here are some very helpful posts that will help you customize your site with CSS:

https://dailypost.wordpress.com/2013/07/25/css-selectors/

https://dailypost.wordpress.com/2013/06/21/css-intro/

https://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

https://thewc.co/articles/view/web-inspector-tutorial

https://cssworkshop.wordpress.com/

If you decide to restrict your changes to certain screen sizes, you can learn more about using media queries that target certain screen sizes here:

https://en.support.wordpress.com/custom-design/custom-css-media-queries/
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Good luck and let me know how it goes!

I forgot to mention that you should of course replace the example purple colour (#bb00bb) with whatever colour code you like. ??

Hi Kathryn,

Firstly, many thanks for taking the time to reply.
When talking about moving the menu – there are six main menu options, and they were wrapping onto two rows. Your code suggestion has fixed this so that the menu appears on one row, like this:

View post on imgur.com

However, this introduces a bug – when the window is resized, or viewed on a mobile device, the menu and background image both jump to a position below the “Site Title” text which is “Milestones Concierge Services & Lifestyle Management”, like this:

View post on imgur.com

• This reply was modified 8 years, 5 months ago by milestonesrb.

For the second part, to control the menu colors – perfect, thank you!

You can restrict the incresed menu width to the screen size of your choice using a media query. So for example, this would restrict the change to screens at least 1200px wide:

@media screen and (min-width: 1200px) {
  .content-area, .main-navigation {
    width: 800px;
  }
}

You can adjust that 1200px value as you like.

https://whatsmy.browsersize.com/ is a tool that will tell you how wide your browser is.

For the second part, to control the menu colors – perfect, thank you!

Great!