Home › Community Forums › Aspire Theme Support › Header size and Logo size on Header
Tagged: header, header background image, size
- This topic has 6 replies, 2 voices, and was last updated 6 years, 8 months ago by
Wes.
-
AuthorPosts
-
July 27, 2016 at 6:07 pm #18876
mariokevinnyc
CustomerHi Wed and Online Team,
I am busy formatting my website, and I am trying to change the size of the header so it can be bigger (taller).
Also I am having issues with my Logo because it looks very small in the “header background image” and I would like to increase the size of it as well.
Any advice or answers would be much appreciated!The website: http://www.brainkandynyc.com/
Thanks for your support!
KevinJuly 27, 2016 at 8:33 pm #18877mariokevinnyc
CustomerOk, With some tinkering, I have figured out the answers to my questions, but now, I don’t know why the menu is positioned all the way to the bottom. I would like it so that the menu words are in the middle of the header, aligned to the middle of the logo.
If anyone can help, it would be much appreciated!
July 27, 2016 at 9:56 pm #18880Wes
ModeratorThe menu is showing up like that because your logo area is currently set at 360px width, which means there isn’t enough space inside the 1200px area for both the logo and your nav (due to how many items you have in your menu).
Since the width of your logo seems to actually be around 180px (visually), I would change your CSS to that width so you can remove the extra space. The extra space is what is causing the menu to fall off to the side. You can change this width around line 1199 in your style.css file –
.title-area { float: left; padding: 25px 0; width: 360px; }
Just change
360px
to around180px
and it should fix it.Example: If you have a logo that is 400px wide, and the nav is around 900px wide, then the nav would fall off to the side since 400 + 900 = 1300. The entire header area is 1200px, so anything that exceeds beyond that will cause that to happen.
Let me know if that helps.
July 27, 2016 at 11:06 pm #18882mariokevinnyc
CustomerThank you for your reply it worked! Another question, how can I put a space in between the items in the navigation bar in the header? (The menu items – home, social media services, about us, etc.)
July 27, 2016 at 11:17 pm #18884Wes
ModeratorIt looks like you’ve already added some space in your Nav. If you want to add more, check out line 1282 in your CSS where you’ve added this –
.genesis-nav-menu a { color: #fff; display: block; font-size: 15px; font-weight: 300; letter-spacing: 2px; padding: 75px 17px; padding-top: 113px; padding-bottom: 23px; padding-left: 11px; text-transform: uppercase; }
You can adjust your padding here to increase/decrease space. Just make sure not to forget what I mentioned earlier about the 1200px space. If your Nav/Menu is too wide with your logo, then it won’t fit inside the header area. So make sure your padding isn’t too much to cause the Nav to get pushed down.
July 28, 2016 at 12:09 am #18885mariokevinnyc
CustomerThe CSS changes you copied and pasted only allows me to move the nav bar up or down. I need to make space between each link on my navigation. The question is, how can I add space between Home and Social media Services, Then make space between Social Media Services and About Us, etc…
The website is: brainkandynyc.com
July 29, 2016 at 11:55 am #18889Wes
ModeratorYou can add padding/space to the sides of each menu item by changing the padding on line 1292 –
.genesis-nav-menu a { color: #fff; display: block; font-size: 15px; font-weight: 300; letter-spacing: 2px; padding: 75px 17px; padding-top: 113px; padding-bottom: 23px; padding-left: 11px; text-transform: uppercase; }
I would remove some of the padding code that you have above and instead add it like this –
padding: 113px 17px 23px 11px;
The padding works in this order –
Top - Right - Bottom - Left
So to add more space on the sides, change the 17px and the 11px (right and left). I would make them both the same so everything can be even. -
AuthorPosts
- You must be logged in to reply to this topic.