[Support request] header border & margins

[Peter]

Ref: JesseWeinberg.com
I’m a new Generate Press Premium user. I wish to duplicate the look and feel of the header/top menu layout of the site Jesseweinberg.com in my test/play site GenPress.ptest1.com. I know how to do this on a landing page with no GeneratePress header using BeaverBuilder. Seems to me that doing this with just GeneratePress would be more elegant, and should be doable. Right now, one thing stopping me from doing this with GeneratePress is that I seem unable to specify positive or negative margins and I do not see how to specify a border for the header. The JesseWeinberg.com site specifies a sizable border in CSS
#header {
padding: 0;
margin: 0 auto;
position: relative;
min-width: 980px;
height: 56px;
background: #434343;
border-bottom: 56px solid #363638;
}
How can I do this via a GeneratePress header/menu?

[Leo]

Hi Peter,

Welcome to GP!
Try this CSS for adding a border to header area:

.site-header {
    border: 5px solid #acb642 ;
    box-sizing: border-box;
}

Adding CSS: http://docs.generatepress.com/article/adding-css/

As for adjusting the padding for header, try Customizer > Layout > Header > Header Padding.

Let us know if this helps!

[Tom]

Hmm, they definitely went about building that header in an interesting way..

You might be better of floating the navigation to the right: http://docs.generatepress.com/article/navigation-location/

Then adding an inset border to the header:

.site-header {
    border-bottom: inset 40px #DDD; /* 40px being half of your header height */
}

Hopefully that gets you started 🙂

[Author]

Posts