Need help? Check out our Support site, then


Helping moving menu above header image (centered)

  1. rebeccabelliston
    Member

    I'm looking for help with the CSS code to move my menu above the header image. I'd also like it centered. Any help would be greatly appreciated.

    My blog is rebeccabelliston.wordpress.com, and I'm using the Twenty-fourteen theme.

    Thanks

    The blog I need help with is rebeccabelliston.wordpress.com.

  2. Before looking at moving the menu, I hovered over Books in your current menu and noticed the text overlaps itself (example). That is happening because of the "line-height:0;" line in the following custom CSS currently saved for your site:

    .nav-menu li a {
    	color: #493935;
    	font-size:17px;
    	line-height:0;
    	text-align:left;
    	padding:20px 4px;
    	font-family:Calluna;
    	text-transform:none;
    	letter-spacing:.01em
    }

    To fix that, try changing "line-height:0;" to "line-height:1;" to see if that looks better to you.

    Next, to move the menu to the top right inside the #page container element, you could start with something like this:

    #page {
    	position: relative;
    }
    
    .site-header {
    	position: static;
    }
    
    .header-main {
    	position: absolute;
    	top: 0;
    	right: 0;
    	z-index: 3;
    }

    If you wanted to move the header image down a little bit so the menu sits above it, you could add a top margin to the header image like this:

    #site-header > a > img {
    	margin-top: 48px;
    }

    Absolute positioning with CSS can get a bit tricky, so reading some background on it is a really good idea. Here's a great link about it: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

    Last, you'll want to be very careful when adding CSS to a responsive width theme because it's very easy to break the layout for small screens—which the theme has so carefully designed. :) If you're new to responsive design, you can start out with your CSS by wrapping them all in a media query that makes it so they only apply to large screens and don't affect smaller screens to start with. To do that, you could go to your Appearance > Customize > CSS editor and wrap all of the edits you've made so far in one media query like this:

    @media screen and (min-width: 1100px) {
        /* put your custom css here */
    }

    That will make smaller screens like tablet and mobile still adapts using the original theme's design for those screen sizes. Then if you'd like to learn more about getting started with media queries and responsive design, you can start at http://en.support.wordpress.com/custom-design/custom-css-media-queries/

  3. rebeccabelliston
    Member

    That helps so much. Thank you!!!

  4. Cheers :)

Topic Closed

This topic has been closed to new replies.

About this Topic