Making the menu more narrow

medsend316 · Member · Nov 23, 2015 at 7:32 pm
Copy link

Add topic to favorites
How would I make the menu section more narrow in the Business Identity theme?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Nov 24, 2015 at 5:16 am
Copy link
Are you talking about narrowing the blue horizontal band so it isn’t full width of the site, or are you talking about the height of it (vertical)?

If vertical, there are two things that will need adjusting. The min-height in .site-header and then the top padding in .no-js .main-navigation, .main-navigation. Adjust the min-height first and then the top and bottom padding to center the text vertically. What you would want to do is to take half the reduction in min-height away from top and half away from bottom. If you reduce min-height more than 48px, then just set the top and bottom padding to 0.
```
.no-js .main-navigation, .main-navigation {
    padding-bottom: 24px;
    padding-top: 24px;
}
.site-header {
    min-height: 90px;
}
```
medsend316 · Member · Nov 24, 2015 at 2:19 pm
Copy link
Ok, I tried that code, but all it did was make the menus move to the top of the bar. It did not change the height of the section. Any other tips?

I put the height as 48 and ) padding as suggested.
thesacredpath · Member · Nov 26, 2015 at 1:27 am
Copy link
Hmmm, that worked for me when I tried it before. Change the .site-header rule to this
```
.site-header {
    min-height: 48px;
    max-height: 40px;
}
```
and then change the top padding in the other rule to 5px and see what you think.
medsend316 · Member · Nov 30, 2015 at 3:41 pm
Copy link
So much better!!! thank you :)
thesacredpath · Member · Nov 30, 2015 at 8:02 pm
Copy link
Hooray and you are welcome.

No items found.