header format has changed in Sundance

  • Author
    Posts
  • #1738880

    biomike1
    Member

    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.

    #1738931

    biomike1
    Member

    Just to say the header image is 984 × 177.

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

    #1738996

    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?

    #1739021

    biomike1
    Member

    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.

    #1739045

    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;
    }
    #1739053

    biomike1
    Member

    thanks for always coming to the rescue. Worked. Just can’t understand why it happened in the first instance.

    #1739056

    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.

    #1739186

    biomike1
    Member

    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%;
    }
    #1739187

    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%;
    }
    #1739188

    biomike1
    Member

    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.

    #1739189

    biomike1
    Member

    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%;
    }

    #1739190

    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;
    }
    #1739191

    biomike1
    Member

    Thanks. Sorted. Out of interest why on Safari do I loose all the customized fonts which appear fine on IE & Firefox?

    #1739192

    kathrynwp
    Staff

    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/

The topic ‘header format has changed in Sundance’ is closed to new replies.