• 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

Logo and Menu on the same space on top

Home › Community Forums › Epik Theme Support › Logo and Menu on the same space on top

Tagged: Logo on top, menu on top

  • This topic has 6 replies, 3 voices, and was last updated 8 years, 10 months ago by multiverso.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • September 2, 2013 at 4:06 pm #7052
    multiverso
    Customer

    Hi,

    I would like to have my Logo and the main Menu on top of the page, on the same level, exactly the same as you can see on the Epik demo theme, but with a little taller logo instead of the text.

    I have read a couple threads regarding this, but I could not understand or apply the right settings to achieve this.

    I uploaded a sample logo, changing first the corresponding height and width on the functions.php “Add support for custom header” section.
    Then I added a custom menu widget on the ““Header Right” Widget area.

    No more tweaks or anything else, and this is the result: http://ninjaseo.es/

    Not pretty 🙁
    – The height of the logo+menu area, as you can see is too tall
    – The Logo should not start right at the top of the browser window, it should have some breathing space.
    – The menu floats to the left, it should float to the right, otherwise as soon as you resize down the browser window it floats below the logo and results in a very big “header”, etc.

    I just would like to have the same setup and behavior like the Epike demo…

    Any idea?
    Thanks!

    September 2, 2013 at 9:25 pm #7059
    Eric
    Customer

    For the height, look in your css for this (line 1954)

    .header-image .site-title a {
        float: left;
        min-height: 164px;
        width: 100%;
    }

    You can either remove or adjust that, and that will fix the height.

    For the logo itself, you could either recreate it in photoshop and add some space on top and/or bottom so it will align in the middle vertically….or you could add some padding to the .head-wrap in your css and that will push that entire section down. Either way will work.

    When it comes to Genesis and uploading logos it’s different for each persons site since it depends on the size and position of the logo, and the menu size on the right.

    For the menu, if you resize your browser to the full width of the theme (1140px) then it floats to the right, but if you resize it a little bit it does float to the left, and you could change that in your first responsive section in your css. Look for this –

    .content,
    .site-header .widget-area {
    	width: 620px;
    }

    Then change that code to this –

    .content {
    	width: 620px;
    }
    	
    .site-header .widget-area {
    	/*width: 620px;*/
    }

    That removes the width


    I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

    September 3, 2013 at 4:28 am #7066
    multiverso
    Customer

    Hi Eric, thanks for the reply.

    As you suggested I changed the min-height property to test (changed to 0px) and the area is not so tall now, but still a lot taller than I need. Please check the page now: http://ninjaseo.es/

    I don’t need the are to be so tall, just enough to accomodate the logo and the menu.

    Any suggestion?

    Thanks in adavance!

    September 3, 2013 at 11:43 am #7074
    Eric
    Customer

    Yes I mentioned what you could do in my previous comment….I’ll repost –

    <blockqutoe>”For the logo itself, you could either recreate it in photoshop and add some space on top and/or bottom so it will align in the middle vertically…..or you could add some padding to the .head-wrap in your css and that will push that entire section down. Either way will work.”


    I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

    September 3, 2013 at 12:54 pm #7082
    multiverso
    Customer

    Hi Eric,

    Thanks for your reply, maybe I have not explained myself ok, English is not my native language…

    The heigh of the “black area” (head-wrap) in Firebug is 125px, but the height of the logo image is only 50px…
    I don’t need 125px, just 50 or mabye 70 for a little padding…

    September 3, 2013 at 2:05 pm #7088
    jennifergrayeb
    Customer

    Hi Eric,

    I was having the same problem and I found updating my padding in this area helped:

    .header-image .site-header .widget-area {
    	padding: 5px 0;
    }

    I still can’t figure out how to align the text properly though. Working on that now. http://jennifergrayeb.com

    September 3, 2013 at 3:11 pm #7092
    multiverso
    Customer

    Thanks Jennifer!

    That setting produced the desired result I was looking for!

    What is the alignment problem that you mention? I visited your site and it looks right to me…

    Thanks again

  • 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 © 2022 · Appfinite · Built With The Genesis Framework