Need help? Check out our Support site, then


header format has changed in Sundance

  1. Just noticed that my header disappeared. Have modified css code so it is there but now it is partly covered by menu.

    Any help please

    Here is my CSS code.

    body.custom-colors #page, body.custom-background.custom-background-image-empty #page {
    	background: #ffffff;
    }
    
    footer.entry-meta {
    	display: none;
    }
    
    h3, h2, h1 {
    	color: #5B0012;
    }
    
    .wf-active .main-navigation a {
    	font-size: 13px;
    }
    
    img.alignleft, img.alignright, img.aligncenter {
    	padding: 0;
    }
    
    .featured-content img, .site-header img, .entry-content img, img[class*="align"], img[class*="wp-image-"] {
    	padding: 0;
    }
    
    #page {
    	padding-left: 0;
    	padding-right: 0;
    	padding-top: 0;
    }
    
    .site-header img {
    	max-height: 95px;
    	visibility: hidden;
    	}
    
    .main-navigation {
    	margin: 0;
    }
    
    .main-navigation ul {
    	padding-left: 10%;
    	padding-right: 10%;
    }
    
    .menu-main-container {
    	background-color: #000000;
    	height: 30px;
    	width: 100%;
    	padding-top: 5px;
    	}
    
    .main-navigation a {
    	color: #FFFFFF;
    }
    
    .main-navigation a:hover, .main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a, .main-navigation li.
    current_page_ancestor > a, .main-navigation li.current-menu-ancestor > a {
    	color: #FF6600;
    }
    
    .main-navigation ul ul :hover > a, .main-navigation ul ul a:hover, .main-navigation ul ul li.current_page_item > a, .main-navigation ul ul li.current-menu-item > a, .main-navigation ul ul li.current_page_ancestor > a, .main-navigation ul ul li.current-menu-ancestor > a {
    	background-color: #000000;
    	color: #FF6600;
    }
    
    .main-navigation ul ul {
    	background-color: #000000;
    }
    
    .main-navigation a:hover, .main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_ancestor > a, .main-navigation li.current-menu-ancestor > a {
    	color: #FF6600;
    }
    
    .site-header {
    	background: url('http://wildforestgym.files.wordpress.com/2014/03/header_21-4.jpg') no-repeat scroll bottom center;
    	max-height: 177px;
    }
    
    .site-header img {
    	visibility: hidden;
    	max-height: 148px;
    }
    
    .hentry {
    	margin-left: 50px;
    }
    
    #content {
    	margin-right: 30%;
    }
    
    .site-content {
    	margin-right: -30%;
    }
    
    #secondary {
    	margin-right: 3%;
    }

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

  2. Just to say the header image is 984 Ă— 177.

    Also the header was working fine up until i checked today.

  3. Hmmm, strange if you have made no changes to the CSS.

    Where do you want the navigation in relationship to the header image? Above it?

  4. the navigation needs to go below the header leaving a 1 or 2 pixel gap so as to create a white line between the header and the navigation.

  5. Find the .site-header and .main-navigation rules in your custom CSS and make them look like the below and I think it gives you what you are looking for.

    .site-header {
        background: url("http://wildforestgym.files.wordpress.com/2014/03/header_21-4.jpg") no-repeat scroll center bottom rgba(0, 0, 0, 0);
        height: 177px;
    }
    .main-navigation {
        margin: 0;
        position: relative;
        top: 148px;
    }
  6. thanks for always coming to the rescue. Worked. Just can't understand why it happened in the first instance.

  7. Not sure either, but just looking at things, having "max-height" vs "height" in the .site-header rule was the red flag for me.

    You are welcome.

  8. Just noticed that on chrome my menu is half way down the screen however in firefox it is fine.

    Here is my current code below

    Any suggestions?

    body.custom-colors #page, body.custom-background.custom-background-image-empty #page {
    	background: #ffffff;
    }
    
    footer.entry-meta {
    	display: none;
    }
    
    h3, h2, h1 {
    	color: #5B0012;
    }
    
    .wf-active .main-navigation a {
    	font-size: 13px;
    }
    
    img.alignleft, img.alignright, img.aligncenter {
    	padding: 0;
    }
    
    .featured-content img, .site-header img, .entry-content img, img[class*="align"], img[class*="wp-image-"] {
    	padding: 0;
    }
    
    #page {
    	padding-left: 0;
    	padding-right: 0;
    	padding-top: 0;
    }
    
    .site-header img {
    	max-height: 95px;
    	visibility: hidden;
    }
    
    .main-navigation {
    	margin: 0;
    	position: relative;
    	top: 148px;
    }
    
    .main-navigation ul {
    	padding-left: 10%;
    	padding-right: 10%;
    }
    
    .menu-main-container {
    	background-color: #000000;
    	height: 30px;
    	width: 100%;
    	padding-top: 5px;
    }
    
    .main-navigation a {
    	color: #FFFFFF;
    }
    
    .main-navigation a:hover, .main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a, .main-navigation li.
    current_page_ancestor > a, .main-navigation li.current-menu-ancestor > a {
    	color: #FF6600;
    }
    
    .main-navigation ul ul :hover > a, .main-navigation ul ul a:hover, .main-navigation ul ul li.current_page_item > a, .main-navigation ul ul li.current-menu-item > a, .main-navigation ul ul li.current_page_ancestor > a, .main-navigation ul ul li.current-menu-ancestor > a {
    	background-color: #000000;
    	color: #FF6600;
    }
    
    .main-navigation ul ul {
    	background-color: #000000;
    }
    
    .main-navigation a:hover, .main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_ancestor > a, .main-navigation li.current-menu-ancestor > a {
    	color: #FF6600;
    }
    
    .site-header {
    	background: url('http://wildforestgym.files.wordpress.com/2014/03/header_21-4.jpg') no-repeat scroll center bottom rgba(0,0,0,0);
    	height: 177px;
    }
    
    .site-header img {
    	visibility: hidden;
    	max-height: 148px;
    }
    
    .hentry {
    	margin-left: 50px;
    }
    
    #content {
    	margin-right: 30%;
    }
    
    .site-content {
    	margin-right: -30%;
    }
    
    #secondary {
    	margin-right: 3%;
    }
  9. Hmmm, it is off in Safari as well. Must be a webkit issue, but we can fix it.

    .main-navigation {
    	margin: 0;
    	position: absolute;
    	top: 178px;
    	width: 100%;
    }
  10. Chrome - sorted
    Safari (on pc) - navigation now too high

    umm! Any chance of inserting coding for different browsers?

    On a separate matter I notice that the general font in Safari (on pc) looks crap. Can we do anything for this.

  11. I am totally bewildered. Today using Firefox the navigation bar has shifted up over header.

    When I go to the CSS editing suite it all looks right. When I update the top px then it moves up and down. However it doesn't change it when I save it and view the website outside of the editing suite.

    .main-navigation {
    margin: 0;
    position: absolute;
    top: 178px;
    width: 100%;
    }

  12. Hmmm, I think I got it. I tried this out in your customizer using Safari, after figuring out what I thought was wrong and it seems to work.

    .masthead-inner {
    position: relative;
    }
  13. Thanks. Sorted. Out of interest why on Safari do I loose all the customized fonts which appear fine on IE & Firefox?

  14. Hi Michael - I checked your site http://wildforestgym.wordpress.com on Safari 7.0.4 / OS 10.9.3 and I see your custom fonts fine.

    Could you please let me know what version of Safari you're using, on what OS? If you're not sure, you can visit http://supportdetails.com/

Topic Closed

This topic has been closed to new replies.

About this Topic