Changing the size of the header on the Hive theme

  • Unknown's avatar
    hughsviewsandnews · Member ·

    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)

  • Unknown's avatar
    hallluke · Member ·

    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.

  • The topic ‘Changing the size of the header on the Hive theme’ is closed to new replies.