Change size of header for Sundance Theme

  • Unknown's avatar
    biomike1 · Member ·

    I would like to reduce the height of my header in Sundance theme for http://wildforestgym.com. Also I would like to reposition the header so that it is at the top of the page and goes the full width of the main column as there is a 3mm gap to the sides and an 8mm gap above.

    Thanks

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, give the following a try and see what you think.

    #page {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
#masthead hgroup {
    position: absolute;
}
  • Unknown's avatar
    biomike1 · Member ·

    Looking good. Thanks :-)

    Any suggestions on:
    1. Reduce the height of the header image.
    2. Moving the menu line closer to the header image.
    3. Making the background to the menu black. The font colour white and when hovered over or clicked on to be FF6600

  • Unknown's avatar
    thesacredpath · Member ·

    Sorry, got in a hurry before.

    1 & 2. On the site header image, any CSS adjustment to the existing header results in it being distorted. What you would have to do is to turn the existing invisible, set a maximum height for the parent div, upload a new header image to your media library, get the URL of that image and then put that into a background declaration in .site-header, replacing URL_OF_IMAGE. The navigation is within .site-header, so your max-height has to account for that and the image has to be aligned center top. The following would be the basics for it. You would change the max-height in the first rule as necessary to space the menu down below the new header image. As a starting point, add about 35px to the height of your new header image. The menu location (#2) will be taken care of with the max-height adjustment.

    .site-header img {
    max-height: 100px;
    visibility: hidden;
}
.site-header {
    background: url("URL_OF_IMAGE") no-repeat scroll center top rgba(0, 0, 0, 0);
}

    3. This takes the new background color for the menu full width of the white area and keeps the menu items the width of the content below. It takes the non-hovered/non-current menu items white and takes them FF6600 when hovered or current.

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

    The above does not change the sub menu colors. If you want to also change those to a black background and white text, and the orange text when hovered, add the following as well.

    .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;
}
  • Unknown's avatar
    biomike1 · Member ·

    Thanks a lot.

    The only element I cannot update is the hover and clicked colour of the menu. It seems to be overridden.

    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: 15px;
}

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

#masthead hgroup {
	position: absolute;
}

.site-header img {
	max-height: 95px;
	visibility: hidden;
}

.site-header {
	background: url('http://wildforestgym.files.wordpress.com/2014/01/header_21-2.jpg') no-repeat scroll center top rgba(0,0,0,0);
}

.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;
}
  • Unknown's avatar
    thesacredpath · Member ·

    I’m not seeing the following rule in your CSS, which is the text hover color. I see it in the code you copied in here, above, but don’t see it in your custom CSS.

    .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;
}
  • Unknown's avatar
    biomike1 · Member ·

    You are a star!!! Thanks once again.

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘Change size of header for Sundance Theme’ is closed to new replies.