Customize navigation bar
I’d like my navigation bar to look like this: http://www.rollingstones.com/. I’d like to:
1. Move it to the top
2. Have a translucent background that stretches the entire screen and
3. Center the links within it.
I’ve looked all over the forums, and I have basic CSS, but virtually no php knowledge, so am finding it difficult to piece together how this might work? I’m working on my site locally right now, but I am using the sundance-child theme. Any help is appreciated. Thanks!
Hi there, I know it’s been a while since you posted this, so I wanted to pop in and see how you’re doing with the menu customizations you wanted to make. Did you still need any help?
Do you have a link to your site on a test or live server now?
I DO still need help with this! The site is still local, unfortunately. Are there any basic guidelines on how to do this for now? Thank You!
To move the location of the menu you’d need to edit a copy of header.php in your child theme folder.
This is the part of the code that covers the navigation:
<nav role="navigation" class="site-navigation main-navigation"> <h1 class="assistive-text"><?php _e( 'Menu', 'sundance' ); ?></h1> <div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'sundance' ); ?>"><?php _e( 'Skip to content', 'sundance' ); ?></a></div> <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> </nav>
You could try moving that higher up in the code, perhaps just after this line:
<?php do_action( 'before' ); ?>
If you’re displaying your title and tagline in your theme you’ll need to make a few adjustments to your CSS if it overlaps with your menu in this new location.
To put a background on your menu you can target the class menu in the CSS of your child theme and add a background image, or some CSS transparency to it.
Since the menu is constrained to the width of the main content area, you won’t get it stretching the entire width of the browser window without a few major structural changes to the HTML.
Learning how to target your site’s CSS will help you make certain design changes. Here are some very helpful posts that will help you customize your site with CSS:
Though they’re written for WordPress.com users, much of the tools and tips apply to self-hosted sites as well. I highly recommend experimenting with a browser inspector in your preferred browser: Chrome and Firefox with Firebug are both good options.
With some experimentation you can see how well you can get the menu looking as you’d like.
Let me know how it goes! If you get the site up on a test or live server feel free to let me know the link – it’s much easier to help directly that way. Good luck!
- The topic ‘Customize navigation bar’ is closed to new replies.