Header size and Logo size on Header

Homepage › Community Forums › Aspire Theme Support › Header size and Logo size on Header

Tagged: , ,

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.