• 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 image in the nav-bar?

Home › Community Forums › Epik Theme Support › Logo image in the nav-bar?

Tagged: image logo, nav bar

  • This topic has 27 replies, 7 voices, and was last updated 9 years, 1 month ago by hotsaucedaily.
Viewing 28 posts - 1 through 28 (of 28 total)
  • Author
    Posts
  • April 6, 2013 at 7:18 pm #3608
    Terence
    Customer

    Wes,

    What is the best way to float an image logo into the nav bar area?

    If you imagine the Epik demo site, what I want to do is replace the text logo with an image logo.

    Is this the best way ~ http://genesistutorials.com/how-to-add-a-logo-to-the-header/ ?

    Many thanks,

    Terence.

    April 7, 2013 at 2:45 am #3613
    Eric
    Customer

    All you have to do is add a logo using the WordPress Header uploader feature. Just look under “Appearance” then click “Header”. Then follow the steps to upload your logo. Keep in mind, the default logo size for epik is 1152 x 120…..so if your image is a different size, you’ll need to go into your functions.php file and change the following code to match the size of your image –

    // Add support for custom header
    add_theme_support( 'genesis-custom-header', array(
    'width' => 1152,
    'height' => 120
    ) );

    Then once you change this and add your image to the WordPress Header uploader, it should upload just fine (without the need to crop)


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

    April 7, 2013 at 5:45 am #3616
    Terence
    Customer

    Hi Eric,

    That’s very true, but then I end up with a background image which not quite in the right place ~ 5 or 10px too high ~ and is, of course not clickable, so unable to point at the home page.

    I am not really used of this way of working with the theme customization options.  Not sure that I like some of the difficulties created by splitting these functions and styling between the CMS, the Framework and the child theme.

    And another thing.  The only way I have been able to put a widgetized menu in the header and still keep it only 60px high ~ like Wes does in the Epik demo ~ is to delete the Site Title and Tagline meta, which I will now have to go and put back in with Yoast’s WordPress SEO plugin, or similar.

    All seems like a rather long way round to me.  I would much rather Wes had left in the standard way Genesis inserts a logo image. And at the moment I can’t figure out why, if I tick the tick-box, I get a 180px high header to display ~ non existent ~ header text, and yet I get a 60px high header, if I don’t.

    Feels like I have gone through the looking glass.

    Terence.

    April 7, 2013 at 9:20 pm #3630
    Eric
    Customer

    Actually this is the “Standard” way to add a logo in Genesis. This is the way all of the new Genesis themes are built. You may be thinking about the old way of adding logos.

    The new way is still very easy to do, it only takes me a minute or less. If you need some assistance just let us know and we can help you get it working exactly how you want it 🙂


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

    April 8, 2013 at 11:20 am #3648
    Terence
    Customer

    The problem was the width and the height of the element in the CSS.  That’s fixed now so the top widget menu longer wraps, and the header is kept to 60px high.  The only thing that remains is to alter the positioning of the image in the nav bar. I can’t find a way to do it with CSS so its easy enough changed by moving down the visible image on a transparent png or gif.

    April 9, 2013 at 3:11 am #3663
    Wes
    Moderator

    Hello, this is Wes, I’ll chime in here since I’m up late 🙂 …..Were you able to get everything resolved? If not, do you have a link I can take a look at so I can tell you what needs adjusted?

    April 9, 2013 at 6:51 am #3670
    Terence
    Customer

    Hi Wes,

    Sorry I didn’t see your message in time. I am a night-bird too but even I have to draw the line at 3:30 am.

    Its on a dev server, but if you put “46.149.20.184 mediacause.dev” in your host file you should be able to see how far I have got so far ~ not very far!

    I have added 3 things to your original design ~ genesis sticky menu, #location scrolling on homepage and conditional menu logic, but its a long way from showtime.

    Terence.

    April 10, 2013 at 3:47 pm #3707
    Terence
    Customer

    Bump

    Hey Wes ~ I don’t believe you’ve visited yet, but I might be wrong.

    I do know you have told me what you think needs adjusting. 😉

    April 16, 2013 at 11:45 am #3902
    waded1
    Customer

    I believe I am looking to do the same thing as Terence.  I am using the Optimal theme.  I would like to move the header logo down so it partially overlaps the slider on the main page and slightly goes below the gray header background on the other pages.  I am going to add a shadow to the logo and I want it to appear as if it is hovering over the header.  You can see my the logo I am referring to at http://legacymillnw.com

    I have done this using css on other themes.  I just not sure what to change in Optimal.

    Thanks in advance.

    Wade

     

    April 16, 2013 at 11:53 am #3904
    Wes
    Moderator

    What you need is something different actually.

    No guarantees, but you can try adding the following code to your #header around line 202 in your css –

    `#header {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    top: 30px;
    width: 960px;
    z-index: 1;
    }`

    ….and then you’ll have to make the adjustments yourself to get it how you want it to appear.

    April 16, 2013 at 12:45 pm #3908
    waded1
    Customer

    Wes, Thanks for the prompt response.  I tried your suggestion and had some success.  The logo moves just where I want it to be.  The only issue I am running into now is it messes with dropdowns on the menu.  The menu appears to be in the same place but when you hover over a menu item only one dropdown item shows up instead of the entire list.

    Unless you have a quick suggestion I will keep tinkering with it.

    Thanks, Wade

    April 16, 2013 at 10:04 pm #3918
    Wes
    Moderator

    You could add #header to the responsive section of your css and change the above code thats affecting it to “none” or “0” depending on what it is.

    April 24, 2013 at 4:48 am #4157
    ayp510
    Customer

    Hi Wes and thanks Social Strategy for the question- I have been following this post for the past few days now and it has been valuable. I was able to make a custom image, and upload it to replace the default text; per Eric’s instructions above.

    Now, I am wondering, is there a way I can bring the logo down a few inches? Also, part of my image is clickable home (as brought up by Social Strategy) but how do I make the whole image clickable as a link?

    In addition, is there a way I can customize “Color Style” under theme settings to further customize my logo and header background?

    Thanks a bunch Wes!

    Alex

     

    April 24, 2013 at 2:30 pm #4172
    hotsaucedaily
    Customer

    @ayp510 – I’m interested in the replies to your question too. Following along.
    BTW, do you have a URL we could look at?

    ~Brian

    April 24, 2013 at 3:51 pm #4192
    Wes
    Moderator

    @ayp510 you’ll need to make the final adjustment from your css file in the header section. It will most likely be in this area of your css –

    `.header-image #title,
    .header-image #title a,
    .header-image #title-area {
    display: block;
    float: left;
    min-height: 120px;
    overflow: hidden;
    text-indent: -9999px;
    width: 50%;
    }`

    As @hotsaucedaily mentioned if you have a link/url we can tell you exactly what you’ll need to edit to get it working.

    April 24, 2013 at 4:14 pm #4198
    ayp510
    Customer

    Yep – I don’t mind sharing my URL; i’m sure it will be of great help to everyone else out there to see a live example.

    http://www.healthyweightlossapproach.com/

    I would like to ideally get the logo and nav to be equidistant and centered from each other.

    I tried looking up the code you have posted within the “functions.php” section but I don’t see it.

    Let me know what you think.

     

    April 24, 2013 at 4:41 pm #4207
    Wes
    Moderator

    The logo/title area and the header right widget area are both too wide to fit within the 1152px space on the same line. That is what’s causing the issue. To fix this, first look around line 681 in your css file for this –

    `.header-image #title,
    .header-image #title a,
    .header-image #title-area {
    display: block;
    float: left;
    min-height: 120px;
    overflow: hidden;
    text-indent: -9999px;
    width: 50%;
    }`

    …..change the width to the size of your logo (which appears to be 350px).

    Then look around line 697 in your css file for something like this –

    `#header .widget-area {
    overflow: hidden;
    width: 65%;
    }`

    ….and change the width to around 60%. Once you do this, they should both sit on the same line like the demo.

    April 26, 2013 at 12:32 am #4289
    ayp510
    Customer

    Great! Thanks, it looks a lot nicer now.

    Last header question: If I wanted to move the right widget (nav) more closer to the center, is that something I can adjust on Epik?

    Appreciate all the help Wes.

    April 26, 2013 at 1:09 pm #4306
    Wes
    Moderator

    Yes you can adjust this – “#header .widget-area” which is around line 697 in your css file.  You could add “float: left;” if you wanted, or you can use other methods to move it over as well.

    `#header .widget-area {
    float: left;
    overflow: hidden;
    width: 60%;
    }`

    April 29, 2013 at 5:32 pm #4416
    ayp510
    Customer

    Perfect, thank you.

    April 29, 2013 at 6:15 pm #4417
    hotsaucedaily
    Customer

    @ayp510 Looks good! What did you use to get the menu into the Header Right Widget area? The Custom Menu Widget included with Epik/Genesis? I like that layout.

    ~Brian

    April 29, 2013 at 6:28 pm #4418
    ayp510
    Customer

    I used the wordpress widget tool below ‘genesis’ as follows: appearance->header right->(then insert) a ‘custom menu’

    The nav tool will be located in the header as a result.

    To line up the nav bar with your logo, re-read some of the past posts between me and Wes. Most of your questions should find answers as a result.

    April 30, 2013 at 4:57 am #4433
    ayp510
    Customer

    Hi Wes,

    After looking at the header area, i’m happy with how it looks but I would like to make a few adjustments.

    I noticed in the original template, that when you hover the mouse above a menu item, it highlights.

    1) How do I have the same hover highlight effect with my current nav-bar?
    2) How do I increase the spacing between nav-menu items? Let’s say I wanted the nav menu to have equal spacing beginning from left to right?

    Thanks!

    April 30, 2013 at 1:58 pm #4446
    Wes
    Moderator

    This is a theme issue, I just noticed it the other day. I’ll have an update for it soon. Until then you can do this to fix it –

    Remove this from line 2730 in your css –

    .epik-black #header a {
    	color: #fff;
    }

    To adjust the spacing take a look around line 1054 for this –

    #header .genesis-nav-menu a {
    	padding: 14px 20px 5px 0;
    	padding: 0.875rem 1.25rem 0.3125rem 0;
    }
    May 16, 2013 at 10:26 am #4717
    Michael
    Customer

    Hello! I have been following this post during the course of our current site development and thanks to the helpful advice here, I finally have things looking the way I want – well, almost! Following Eric’s advice at the beginning of the discussion, I successfully changed my header image size in order to upload a custom logo. The image link action (to site home) behaves as it should, and the Genesis nav menu fits in the header-right widget correctly (when viewed at full size).

    The only issue I have with this now – and hopefully there’s an easy fix for this – is that my logo and nav menu both float left and this looks slightly “off” when viewed on my iPhone, when all other content divs below are centered. Is there one best-practice solution for centering my logo image and top nav (like in the Epik demo) at this screen size?

    *Also, in Wes’s Epik Widget location guide http://appfinite.com/topic/epik-widgets-guide/, I notice the header area features some additional links that are not present in the demo version. I’m considering adding a couple of simple links like this to my header, and I wonder what might be the best way to go about this in order to achieve something like Wes’s example.

    May 17, 2013 at 11:18 am #4745
    Michael
    Customer

    Anyone? Let me know if you need me to post my URL. Thanks, I appreciate any help I can get!

    May 17, 2013 at 9:07 pm #4748
    Eric
    Customer

    Hello @Michael,

    Yes please post a link to your site so we can be able to see what the issue is.

    For any other questions (in reference to your 2nd question), you’ll have to create a separate thread/topic since we have a “One Question Per Thread” policy….this just helps us keep things organized, and makes it easier to search for topics.

    Thanks


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

    May 20, 2013 at 12:46 pm #4770
    hotsaucedaily
    Customer

    @Michael
    I’m looking forward to learning how you accomplished your header image settings.
    Please post your link here for us to learn from.

    Thanks!

  • Author
    Posts
Viewing 28 posts - 1 through 28 (of 28 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