• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

How To Change Color Of Menu Bar (Altitude Pro Theme)?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › How To Change Color Of Menu Bar (Altitude Pro Theme)?

This topic is: not resolved

Tagged: altitude, bar, color, menu

  • This topic has 4 replies, 3 voices, and was last updated 7 years, 9 months ago by gpriver.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 12, 2015 at 6:43 am #144149
    Fabian182
    Member

    Hello,

    how can I change the color of the menu bar from black to white (Altitude Pro Theme)?

    how can I change the color of the menu points (in the menu bar) from white to black?

    My blog: http://www.farbentour.de/blog/

    March 12, 2015 at 6:53 am #144151
    DTHkelly
    Member

    If that is primary navigation, the Genesis CSS selectors should work (just add your Hexadecimal #s).
    Background color = background color 🙂
    color = font color

    .nav-primary {
    	background-color: #xxxxxx;
    	color: #xxxxxx;
    }
    
    .nav-primary li a{
         color:#xxxxxx; 
    }
    .nav-primary a:hover, .nav-primary .current-menu-item > a {
        color:#xxxxxx;
    	background-color: #xxxxxx;
    }
    

    Hope that helps!

    March 12, 2015 at 9:18 am #144188
    Fabian182
    Member

    Many thanks for your help.

    But now there is a "gap" left and right from the navigation menu (http://www.farbentour.de/wp-content/uploads/2015/03/primary-nav.png)

    How can I change the color from this?

    Thank you

    March 12, 2015 at 10:23 am #144202
    DTHkelly
    Member

    Your theme's CSS line 907, .site-header has a background color

    .site-header {
    background-color: #000;

    }

    change #000 (black) to match your primary nav.

    August 11, 2015 at 12:07 pm #162051
    gpriver
    Member

    Kellylise, your first code changed the menu color but also changed it when the site first loads and it's supposed to be transparent. Then you scroll and the menu is then supposed to turn to a color.

    Also, you second bit of code for the sides of the menu bar didn't work.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble