Need help? Check out our Support site, then


Help with moving menu items below header

  1. Hi,

    I am currently set up with a stretched header image (done using advice found on this excellent forum). My goals using custom CSS are to:

    (1) Center my header image,
    (2) Make pages that match the individual categories in the right header column, and
    (3) Delete the Categories menu and have the equivalent pages align horizontally below the centered header image

    A bit like this blog, but centered rather than left-aligned: http://robinlennoxstewart.com

    Would greatly appreciate any help. I have looked at some CSS solutions on this forum but they don't work for my website.

    The blog I need help with is hahakar.me.

  2. A follow up:

    (1) I did try out this code to make the pages menu horizontal but that didn't seem to work: http://en.forums.wordpress.com/topic/imbalance-2-customised-header?replies=3

    (2) This popular blog is sort of how I want the menu items to look, but with each page corresponding to a different topic (i.e. those currently under categories on the top right)

  3. Hi, http://robinlennoxstewart.com is using a widget in one of the header widget areas and has hand-coded up a solution using inline CSS and HTML in a text widget for the menu.

    1 & 3. I was going to have you add some here, take some away there, change some other stuff, and then it became clear the best thing would be to make the modifications and then post the CSS you should have in your custom CSS below. Remove what you have to safe keeping in a plain text file and then paste in the below which cleans up the top header area, centers your image and makes your menu horizontal below the header image.

    #header {
    	padding-bottom: 0;
    }
    #site-info,
    #site-info a {
    	color: #A1A1A1;
    	font-weight: normal;
    }
    #header-image-link img {
    	display: none;
    }
    #header-image-link {
    	display: block;
    	background: url('http://hahakarme.files.wordpress.com/2014/02/cropped-hahakar-360_b21.png') no-repeat;
    	width: 100%;
    	height: 120px;
            background-position: center top;
    }
    #branding {
    	width: 100%
    }
    #header {
    	position: relative;
    }
    #header-left {
    	position: absolute;
    	width: 100%;
    	bottom: 30px;
    }
    #header-center, #header-right {
    	display: none;
    }
    .menu ul li {
    	float:left;
    	padding-right:20px;
    }

    2. To have categories also in your top navigation, create a Custom Menu and assign it to the "Primary" menu location. You can then add categories, pages, or pretty much whatever you wish to that menu, and it will appear where "about" and align horizontally across your page underneath your header image.

  4. Thanks so much -- that worked perfectly!

    Newbie follow up question: I have done as you suggested re:the menu items but they are currently left-aligned. How do I centre the primary menu and also change its font?

    Greatly appreciate the help.

  5. Great, glad that worked for you. To center your menu, add the following to the bottom of your custom CSS.

    .menu {
        text-align: center;
    }
    .menu ul {
        display: inline-block;
    }
  6. Super.

    Two (hopefully last!) things:

    (1) The menu seems slightly off-center compared with the header image. Any way to tweak that?

    (2) How can I change the menu font?

  7. 1) In the background declaration in #header-image-link change the "center" attribute to 48% so it looks like this:

    background: url("http://hahakarme.files.wordpress.com/2014/02/cropped-hahakar-360_b21.png") no-repeat scroll 48% top rgba(0, 0, 0, 0);

    2) What font did you want to use? The following would be the code, but this might be a little more involved depending on the font you wish to use. Are you wanting to use a Typekit font?

    .menu ul a {
    font-family: "Times New Roman", Georgia, serif;
    }
  8. Thanks for (1), that worked perfectly.

    Regarding the font I haven't chosen one yet. Just wanted to know what my options in CSS were, assuming it would be straightforward to do so. Seems it may not be.

    Just want to know the simplest code that would allow me to experiment with different fonts, even if it only gives me a limited set of choices to start with.

  9. For the typekit fonts, they have to be "registered" into your site, so that means adding it as either "header" or "body" at Appearance > Customize > Fonts. Once registered, we can then apply it to the menu and unapply it to any other header elements you do not want it applied to.

    For playing with the fonts on the menu, you can use the following. I included several font related declarations you can play around with.

    .menu ul a {
        color: #CC0000;
        font-family: "Times New Roman", Georgia, serif;
        font-size: 100%;
        font-wieght: bold;
    }
  10. Ok, will play around with this and get back to the forum if I need further assistance.

    Thanks so much for your invaluable help!

  11. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic