Change Header Spacing

This topic has 8 replies, 2 voices, and was last updated 7 years, 10 months ago by Andrew Misplon.

Author
Posts
February 15, 2017 at 7:05 pm #5941

jko
Participant
Hey Andrew,
It looks like you were going to add something to reduce the height of the header in the email you sent me, but there was no CSS code. I would like to have the logo so it is not in line with the menu. Thanks!!
February 15, 2017 at 7:07 pm #5942
Andrew Misplon
Keymaster
Sure 🙂 Here we go to center the header:
```
@media (min-width: 768px) {
	/* Header */
	.site-header .container {
		height: auto;
	}
	.site-header .site-branding-container {
		float: none;
		max-width: 100%;
		padding-right: 0;
	}
	.main-navigation {
		float: none;
		text-align: center;
		max-width: 100%;
	}
	.main-navigation>div {
		float: none;
		display: inline-block;
		vertical-align: top;
	}
	.main-navigation div>ul>li>a {
		height: 60px;
		line-height: 60px;
	}
}
```
February 15, 2017 at 7:11 pm #5943

jko
Participant
That works! But instead of having the logo centered, what do I need to do to make it left or right aligned?
February 15, 2017 at 7:24 pm #5944
Andrew Misplon
Keymaster
You can try removing all Custom CSS related to this task and inserting the following:
```
@media (min-width: 800px) {
  .site-header .site-branding-container {
    display: block !important;
    float: none;
    max-width: 100%;
    padding: 20px 0;
  }
  
  .main-navigation {
    float: none;
    max-width: 100%;
  }
  
  .main-navigation div > ul > li > a {
      height: 60px;
      line-height: 60px;
  }
}
```
February 15, 2017 at 8:05 pm #5945

jko
Participant
Great!! Is there any way to change it so when I scroll down the menu doesn’t cover up part of the logo? The bottom text part of my logo is getting covered by the menu whenever I scroll down.
February 15, 2017 at 8:11 pm #5946

Andrew Misplon
Keymaster
Do you perhaps want to just make the boxed container wider so the menu and logo fit on one line? Unfortunately, with CSS adjustments like this there can be several knock on issues that have to be dealt with.
February 15, 2017 at 8:16 pm #5947

jko
Participant
I understand. Sure, I think that will work.
February 15, 2017 at 8:16 pm #5948
Andrew Misplon
Keymaster
You can try the following to deal with the sticky header issue assuming you keep the previous Custom CSS:
```
.site-header.scale.scaled .site-branding-container .site-branding img {
	max-height: 57px;
}
```
You could also disable the sticky header if it isn’t an important site feature.
February 15, 2017 at 8:20 pm #5949
Andrew Misplon
Keymaster
If you want to instead, make the boxed container wider, you could use:
```
.boxed #page {
	max-width: 1250px;
}

.container {
    max-width: 1250px;
}
```
Author
Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.