Remove columns in header

  • Hi there,

    I’m using the Sight theme and would like to have an image (or text) span the entire masthead. Since the theme has place holders for a search box and menu within the header I think there must be columns embedded in the header that are preventing my image from filling the full space.

    I have already removed the search box (with code below) and am not using the menu in this area.

    If I can’t have the image span the entire space I’d at least like to be able to move the text to the far right. Is that possible? I’ve tried adjusting the padding but no luck.

    Code used for removing search box:
    /* Remove sidebar */
    header[role=”masthead”] {
    display: none;
    }

    Code being used for title and tagline (I’ve altered the size of the text and some padding from original design):
    .site-title a {
    color:#000;
    text-decoration:none;
    }

    .site-description {
    clear:none;
    color:#656363;
    float:left;
    font-size:20px;
    line-height:1.3;
    margin:0 4.47761% 0 3.17761%;
    padding:5.5em 0 0;
    width:43.283582089%;
    }

    I tried this code to remove potential columns in the header but didn’t seem to work:
    /* Remove sidebar */
    header[role=”masthead”] {
    display: none;
    }

    Many thanks and appreciate your knowledge while I’m learning!

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

  • To make the header image area full width in the Sight theme, add this to your Appearance → Custom Design → CSS editor:

    .site-header hgroup,
    .header-link {
    	width: 100%;
    }

    If you’d like to add back the search box and move it to the bottom right, you could remove the rule to hide it first and then try adding something like this:

    .site-header{
    	overflow: hidden;
    }
    .header-nav-search-container {
    	position: absolute;
    	right: 0;
    	bottom: 0;
    }
  • You are amazing! Thanks very much!

  • The topic ‘Remove columns in header’ is closed to new replies.