• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

Header size and Logo size on Header

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.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 27, 2016 at 6:07 pm #18876
    mariokevinnyc
    Customer

    Hi 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!
    Kevin

    July 27, 2016 at 8:33 pm #18877
    mariokevinnyc
    Customer

    Ok, 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 #18880
    Wes
    Moderator

    The 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 around 180px 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 #18882
    mariokevinnyc
    Customer

    Thank 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 #18884
    Wes
    Moderator

    It 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 #18885
    mariokevinnyc
    Customer

    The 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 #18889
    Wes
    Moderator

    You 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.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.
Log In

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2023 · Appfinite · Built With The Genesis Framework