Need help? Check out our Support site, then


How to move the Nav bar further down?

  1. Hey guys, I literally just started a little bit ago and I haven't set anything up on my site yet. The first thing I'm trying to do is set up the layout of the page before doing some graphic design (background, logo work, etc). Btw I am using the upgrade bundle of wordpress.com (cloud hosted) not self hosted, which from what I've read has less flexibility in terms of changing the appearance of my site right?

    So my first question is how do I move the navigation further down to leave more room for my logo. I'm trying to do something similar to the background/logo spacing on this site.

    or like this but with more vertical space for the logo/background.

    Also is there any way to change the way the boxes/nav bar looks (ie: make it more square or add a gradient, etc)?

    Thanks so much guys! Really appreciate it!

    The blog I need help with is eckymusic.com.

  2. Which from what I've read has less flexibility in terms of changing the appearance of my site right?

    The WordPress.com Custom Design upgrade lets you add or replace CSS to change out the look of things; it does not give you the option to modify the underlying PHP code. That's probably what you're thinking of.

  3. So my first question is how do I move the navigation further down to leave more room for my logo?

    You can use a CSS image replacement technique for that. The height value here will adjust how much room there is for the header area above the menu, which is better than trying to move the menu separately.

    Here is an example showing how to use image replacement to replace the site title with a logo in the Parament theme:

    #branding h1 a {
    	background: url(http://s.wordpress.org/about/images/wordpress-logo-notext-bg.png) no-repeat;
    	width: 176px;
    	height: 145px;
    	display: block;
    	text-align: left;
    	text-indent: -9999px;
    }

    I used a WordPress logo as an example image. Replace the url() value with your image link, and replace width and height with the width and height for your image.

  4. Also is there any way to change the way the boxes/nav bar looks (ie: make it more square or add a gradient, etc)?

    To change out the gradient, the best way is to look at the original theme stylesheet, copy out the relevant CSS and replace the color values. Here is the current Parament stylesheet (linked to in CSS Settings on the Appearance → Custom Design → CSS page in your blog dashboard):
    https://s1.wp.com/wp-content/themes/pub/parament/style.css?m=1340741399g&minify=false

    Here is an example to change the menu color gradient in the Parament theme:

    #menu {
    	background: #070707;
    	background: -moz-linear-gradient( top, #384959 1%, #586e83 100% );
    	background: -webkit-gradient( linear, left top, left bottom, color-stop( 1%, #384959 ), color-stop( 100%, #586e83 ) );
    	background: -webkit-linear-gradient( top, #384959 1%, #586e83 100% );
    	background: -o-linear-gradient( top, #384959 1%, #586e83 100% );
    	background: -ms-linear-gradient( top, #384959 1%, #586e83 100% );
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#384959', endColorstr='#586e83', GradientType=0 );
    	background: linear-gradient( top, #384959 1%, #586e83 100% );
    	border: 1px solid #444855;
    }

    You can switch out the color codes with different choices if you'd like. Here is a color picker you can use to get color codes:
    http://automattic.github.com/Iris/

    To make the menu bar more square, you can adjust the border-radius value. Here is an example:

    #menu {
    	border-radius: 3px;
    }

    Add those snippets to your Appearance → Custom Design → CSS editor page and Preview to see the changes before applying them.

    To change the border radius for other values, look at Parament's stylesheet and find all the places that have "border-radius", copy the selectors, and use those selectors in your Appearance → Custom Design → CSS editor with the px value adjusted.

  5. Oh wow, thank you so much for the help! Yeah this is great! However, I was hoping to be able to just move the nav bar further down instead of including a logo, because I want the logo to be a part of the background image because I'm going to be doing some clipping masks and effects to blend the logo with the background image, I just need to make sure the nav bar is far enough down to not get in the way of the logo. Is there any way to do that? Thanks so much again, this is still very helpful!

  6. Oh wow, thank you so much for the help! Yeah this is great! However, I was hoping to be able to just move the nav bar further down instead of including a logo, because I want the logo to be a part of the background image because I'm going to be doing some clipping masks and effects to blend the logo with the background image, I just need to make sure the nav bar is far enough down to not get in the way of the logo. Is there any way to do that? Thanks so much again, this is still very helpful!

Topic Closed

This topic has been closed to new replies.

About this Topic