Support » Theme: Goran » Main menu position and text color

  • Hi,

    I’m looking to move the main menu to the left to keep the 6 options on a single line.
    Having experimented with padding, I suspect that I’m approaching the problem in the wrong way.

    Second request.. 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).

    The site is http://milestones-wa.com.au/

    First time poster and developer on this, so happy to be pointed at an article if I’m asking for something daft!

    Cheers,

    Rob

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    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?

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    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:

    An Intro to CSS: Finding CSS Selectors

    An Intro to CSS, or How to Make Things Look Like You Like

    Intro to CSS: Previewing Changes with the Matched Rule Pane

    How to Find Your Theme’s 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:

    Using Media Queries with Custom CSS

    Media Queries for Standard Devices


    http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

    Good luck and let me know how it goes!

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    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 2 years, 11 months ago by  milestonesrb.

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

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    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.

    http://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!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Main menu position and text color’ is closed to new replies.