Changing the size of the header on the Hive theme

hughsviewsandnews · Member · May 30, 2018 at 3:53 pm
Copy link

Add topic to favorites
Hi, I’ve been told that the header on the hive theme, I am using on my blog, takes up most of the viewing page! Here’s what one reader told me –

not sure what’s happened to your blog since you’ve made alterations, but the header takes up half the screen. leaving a mere 4-5 inches of space to read your blog on!

I’ve been told that I can reduce the size of the header so that more space is given to the contents of the post. How do I do this?

The blog I need help with is: (visible only to logged in users)
hallluke · Member · May 31, 2018 at 10:59 am
Copy link
Hi Hugh,

On my little laptop screen your header and menu take up most of the page, you can reduce the margins above and below your header with this code:
```
.site-branding {
  margin:2em 0;
}
```
You might also consider changing the padding on your main menu. At the moment there are big gaps between each item and it splits to 3 lines. You can make it slightly more compact by using this code:
```
@media only screen and (min-width: 1000px) {
  .nav--main > li > a, .nav--main a {
  	padding: 0.5em 0.75em;
  }
  nav#site-navigation {
    height:3.5em!important;
  }
}
/* reposition nested menu indicator */
.nav--main .menu-item-has-children::after {
  left:-1em;
}
```
Another approach is to remove some of the items from your menu and place them in the sidebar instead. Your category links would be a good candidate if you want to give this option a try. Take a look at the categories widget and navigation menu widget for the easiest options.

No items found.