[Theme: Hatch] Moving the menu below the header image

  • Author
    Posts
  • #1082755

    witapuspita
    Member

    Hello,
    I am working on my blog http://witapuspita.com/
    Everything looks quite like what I wanted, but how do I move the menu links (Portfolio, About Me, Link) from the top right hand corner to below the header image in the center?
    Thanks for your help!

    The blog I need help with is witapuspita.com.

    #1083124

    Hmm since your blog is self hosted, I suppose you have the access to you code. Are you ready to do some PHP code change or you want achieve this only through CSS, which would be little hard so!

    PHP code will be in the Dashboard -> Appearance -> Editor

    #1083127

    Hello! @castelinokelvin, it looks like you’re assuming that anyone with a custom domain name is using a self-hosted WordPress.org setup but that’s not the case! A simple way to tell is by looking at the footer. A link back to WordPress.com means it’s hosted at WordPress.com even if the domain doesn’t say “wordpress.com” in it. :)

    #1083128

    How do I move the menu links (Portfolio, About Me, Link) from the top right hand corner to below the header image in the center?

    Try adding this to your Appearance → Custom Design → CSS editor:

    .blog #masthead hgroup,
    .home.page #masthead hgroup {
    	margin-bottom: 0;
    }
    
    .main-navigation {
    	position: absolute;
    	text-align: center;
    	top: 275px;
    	width: 940px;
    }
    
    .main-navigation ul {
    	float: none;
    	display: inline-block;
    }
    
    .main-navigation li:first-child a {
    	margin-left: 0;
    }

    Note that it’s best to only copy in the CSS rules that you change without copying the entire original stylesheet into the editor. It makes things easier to keep track of and the CSS will be easier to work with that way.

The topic ‘[Theme: Hatch] Moving the menu below the header image’ is closed to new replies.