Support » Themes and Templates » Extend a border in header to full width of screen

  • Hi, I hope someone can help me.

    I am trying to extend the gray border bar in the header to the full width of the screen but can’t figure how to do this. Site is: http://www.circlebloom.com

    I can’t use a wrapper for this as this is in the header. My css for this is:

    .custom #header {
    border-bottom:11px solid #e7e8e8;
    height:230px;
    margin-top: 1em;
    margin-left: -4em;
    margin-right: -4em;
    }

    .custom #header #logo {
    float: left;
    height: 57px;
    margin: 0;
    padding: 0;
    text-indent: -9999px;
    width: 400px;
    }

Viewing 1 replies (of 1 total)
  • It looks like right now the grey bar is a bottom boarder on the #header <div>. Your options using CSS only are:

    expand the #header <div> to 100% width and reposition the logo and menu inside the div accordingly.

    Remove the boarder and use an :after pseudo-element to create the bar.

    Or you could remove the boarder and add another <div> into the header file of your template and use css to position it as the bar.

    Hope that helps.

Viewing 1 replies (of 1 total)
  • The topic ‘Extend a border in header to full width of screen’ is closed to new replies.