Add Logo on Top of Navigation Menu in a Genesis Child Theme

Share this on:

Website headers are often quite compact with the logo and navigation sharing the header area. Genesis child themes have a Header Right widget area that allows you to add a Custom Menu to the header of your WordPress website. But what if you want the logo to be on top of a full width navigation menu for a ribbon effect? A lovely example of this is the website for Vanilla Bake Shop.

logo on navigation menu ribbon

Today’s tutorial shows you one technique to add your logo on top of the the primary navigation in the Genesis sample child theme – image below. It is very basic and, of course, you would want to add some additional styles to create a decorative ribbon effect. You can look at these decorative borders with CSS to help you style your logo on top of your navigation menu ribbon.

Step 1. Genesis Theme Settings

In your Genesis Theme Settings from your WordPress Dashboard, in the Header section, it says “Use for site title/logo:”, and you want to choose “Image Logo”.

Step 2. Move the Genesis Primary Navigation Before the Header

You can move your primary navigation above the header area. Open your Genesis child theme functions.php in a text editor and add this code to the bottom of the file.

//* Reposition the primary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before_header', 'genesis_do_nav' );

Step 3. Add Styles to Move the Logo on Top of the Navigation Menu

Open your child theme style.css in a text editor. You may also add this CSS to a custom CSS editor plugin, if you like. An explanation of all the CSS is at the bottom of this tutorial.

You can add this CSS just before the Media Queries section.

/* 
Logo on top of Primary Nav
------------------------------------- */

.site-inner {
	padding-top: 80px;
	padding-top: 8rem;
}

.header-image .site-description {
	display: none;
	height: 0;
}

.header-image .site-header,
.header-image .site-header .wrap {
	background: none;
	padding: 0;
}

.header-image .site-title a {
	float: left;
	min-height: 164px;
	background: url(images/logo.png) no-repeat left;
	border: 1px solid #333;
	padding: 0;
	display: block;
	top: 40px;
	position: absolute;
	width: 360px;
}

.site-header .widget-area {
	display: none;
	height: 0;
}

/* Primary Navigation */
.nav-primary {
	background-color: #333;
	margin-top: 44px;
}

.nav-primary .genesis-nav-menu {
	float: right;
	width: auto;
	margin-left: 360px;
}

.nav-primary .genesis-nav-menu .menu-item {
	float: left;
}

.nav-secondary {
	margin-top: 40px;
}

Step 4. Add Styles For Centered Logo For Mobile

Many Genesis child themes have the logo and navigation centered at smaller screen sizes. For this tutorial you can add some CSS to keep the same centered look as the default sample child theme. You could also add a mobile navigation menu to keep the ribbon effect for mobile.

Find this section in the Media Queries section:

@media only screen and (max-width: 1023px) {
[...]
}

Add the following CSS to the bottom of this media query section just before the closing bracket – }.

/* 
Logo Centered Again
------------------------------------- */

.site-inner {
	padding-top: 40px;
	padding-top: 4rem;
}

.header-image .site-header .wrap {
	background-position: none;
}

.header-image .site-title {
	margin: 0;
}

.header-image .site-title a {
	border: 0;
	float: none;
	background: url(images/logo.png) no-repeat center top;
	position: relative;
	margin: 0 auto;
	max-width: 360px;
}

.nav-primary {
	margin-top: 0;
}

.nav-primary .genesis-nav-menu {
	float: none;
	margin-left: 0;
}

.nav-primary .genesis-nav-menu .menu-item {
	float: none;
}

.nav-secondary {
	margin-top: 0;
}

And there you have it – a good start to a new look for your header and website navigation.

logo on top of primary navigation menu

Explanation of the CSS in Step 3

This moves the content area down, so there is padding between the content and the logo. You may not need the extra padding, especially if you are also using the secondary navigation menu.

.site-inner {
	padding-top: 80px;
	padding-top: 8rem;
}

This CSS keeps the site description from displaying.

.header-image .site-description {
	display: none;
	height: 0;
}

This section removes the default image logo from ‘.header-image .site-header .wrap’, and also removes any extra padding.

.header-image .site-header,
.header-image .site-header .wrap {
	background: none;
	padding: 0;
}

This CSS adds the logo, positions it, and adds a border around it; you may not want the border. The min-height is the height of your logo, and width is the width of your logo. The ‘top: 40px;’ will need to be adjusted to fit your logo.

.header-image .site-title a {
	float: left;
	min-height: 164px;
	background: url(images/logo.png) no-repeat left;
	border: 1px solid #333;
	padding: 0;
	display: block;
	top: 40px;
	position: absolute;
	width: 360px;
}

The next section just makes sure that the Header Right widget area does not display.

.site-header .widget-area {
	display: none;
	height: 0;
}

Now let’s look at the navigation CSS. The first section just adds a background-color to the navigation and adds a margin at the top. You can adjust the background-color and the margin to match your logo.

.nav-primary {
	background-color: #333;
	margin-top: 44px;
}

The next section adds a left margin to the primary navigation, so that the menu items don’t slide beneath the logo. The margin needs to be at least the width of your logo. It also keeps the navigation to the right.

.nav-primary .genesis-nav-menu {
	float: right;
	width: auto;
	margin-left: 360px;
}

This floats each menu item to the left.

.nav-primary .genesis-nav-menu .menu-item {
	float: left;
}

And then finally, if you use the secondary navigation, you want it to remain below the logo, so add a top margin.

.nav-secondary {
	margin-top: 40px;
}

Explanation of the CSS in Step 4

This CSS moves the content area back to the default position, if you added more top padding in the Step 3.

.site-inner {
	padding-top: 40px;
	padding-top: 4rem;
}

This adjusts the logo CSS, so that it is centered, as in the default. It also removes the border around the logo; you can remove that line if you want to keep the border.

.header-image .site-title a {
	border: 0;
	float: none;
	background: url(images/logo.png) no-repeat center top;
	position: relative;
	margin: -40px auto 0;
}

These navigation styles just remove the styles you added to the logo and navigation above, so that the logo is centered below the primary navigation.

.nav-primary {
	margin-top: 0;
}

.nav-primary .genesis-nav-menu {
	float: none;
	margin-left: 0;
}

.nav-primary .genesis-nav-menu .menu-item {
	float: none;
}

.nav-secondary {
	margin-top: 0;
}

And that’s the end of the CSS explanations, so you can get started.

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


photo of Marcy Diaz who owns Amethyst Website Design

Comments

91 responses to “Add Logo on Top of Navigation Menu in a Genesis Child Theme”

  1. Sue Surdam Avatar

    Thanks for this tutorial and best of all including the responsive CSS. Knowing how to do this really opens up design options using overlapping elements. I have been missing that level of design sophistication since the move to responsive websites.

    1. Marcy Diaz Avatar

      I’m glad you liked it, Sue!

  2. Tom Avatar
    Tom

    Thanks for a great tutorial, Marcy! Not only does this deliver a detailed how-to for a new look, but it actually delivers the low-down on what each code section does. Plus it deals with perhaps the two most troublesome items people ask for assistance with: headers and navigation. I’m banking this for reference.

    1. Marcy Diaz Avatar

      I’m glad you liked the tutorial, Tom!

  3. Miguel Avatar
    Miguel

    This is a FANTASTIC tutorial Marcy.
    Thank you very much.

    I have a follow up question:
    If I want to move the logo more to right how can I do this?

    Thanks!

    1. Marcy Diaz Avatar

      You’re welcome, Miguel.

      To move the logo, you would look at this section:

      .header-image .site-title a {
      	float: left;
      	min-height: 164px;
      	background: url(images/logo.png) no-repeat left;
      	border: 1px solid #333;
      	padding: 0;
      	display: block;
      	top: 40px;
      	position: absolute;
      	width: 360px;
      }

      The parts that position the logo are:

      	top: 40px;
      	position: absolute;

      You can add something like left: 100px; or left: -40px;

      1. Miguel Avatar
        Miguel

        THANK YOU Marcy you rock :-)
        It worked like a charm.

        My logo is right where I wanted it.

        Have a great day!

        Miguel

      2. Marcy Diaz Avatar

        That’s great, Miguel!

  4. Bill Avatar
    Bill

    This works great. Thanks for this tutorial, I have been trying to get this for days. My only problem is when the site goes small I have to put the header on the right due to the hamburger for a slide out responsive menu. Any ideas? dogloverzdaily.com

    1. Marcy Diaz Avatar

      To keep the header to the left at smaller screen sizes, you need to look in the @media sections at the bottom. For one of the screen sizes you will see these lines (there may be others with them):

      .site-header .title-area, 
      .site-title {
          text-align: center;
      }

      You can remove those lines, and then it should stay to the left.

      1. Bill Avatar
        Bill

        I’m using sidr js plugin so when it got small it was a problem but solved it by adding the logo to sidr and then display:none this logo. Works good at dogloverzdaily.com

      2. Marcy Diaz Avatar

        It looks great, Bill. So do the dogs!

  5. Regina Mize Avatar

    Marcy I just wanted to thank you for creating such a wonderful tutorial. Most tutorials just throw up code without any explanation or images showing the finished result. Your CSS explanation has helped me immensely.

    I only have one question. What if I want the logo to appear in the center of the nav menu?

    Thanks

    1. Marcy Diaz Avatar

      You’re welcome, Regina! Adding the logo to the center between the navigation menu links is a bit more complex, and would really require another tutorial.

  6. Regina Mize Avatar
    Regina Mize

    Hi Marcy. I do have a second question.

    My logo appears centered with the nav menu in Google Chrome which is the browser that I use; however, it appears off center in Internet Explorer and Firefox. Any advice?

    Thanks again

    1. Marcy Diaz Avatar

      I think you may want to clear your Chrome browser cache to see the logo to the left in Chrome too.

  7. Kristen Avatar

    Hi Marcy,

    Thank you very much for this great tutorial, I used it to work on my navbar and header and have a basic working configuration going. I adjusted it so that my logo is on the right. I am using Prose theme (it is upgraded to HTML5) so I used the built-in custom code feature to add what was needed in relation to functions and CSS.

    It looks nice in desktop mode, but I cannot get things looking right in mobile. My logo gets shoved far off to the right instead of under the menu. And my menu toggle doesn’t like to work because it’s sitting on top of the logo (which is a hyperlink, so tapping the menu tends to go to my homepage). I’ve added a “top” to the “.header-image .site-title a” which seems to let the menu toggle, but it’s still not looking pretty. Any ideas as to what I may have missed? Is it because I have my logo floating to the right and I need to do something different to bring it back center and below the nav?

    I am also using the Ubermenu nav menu plugin, but it usually plays very nicely with nav styling. Thank you again Marcy!!

    1. Marcy Diaz Avatar

      Hi, Kristen,

      If you want your logo centered, the section that is not allowing it to center is the width: 100% !important;:
      .title-area {
      background: url(“http://www.naturalbirthandbabycare.com/wp-content/uploads/2014/06/768.png”) no-repeat scroll center center / contain rgba(0, 0, 0, 0) !important;
      height: 141px !important;
      width: 100% !important;
      }
      At your small screen size, you need to add:
      .title-area {
      width: auto !important;
      margin-top: 50px;
      }
      The margin (it’s optional) may need to be adjusted so the logo is below the menu, if that’s what you want.

      I don’t use Ubermenu, and so don’t really know what it’s contributing to the small screen sizes, without taking more time than I have.

  8. Steph Avatar
    Steph

    What a great tutorial!

    I’m just using it now. I’d like to add a ribbon end (image) to the right hand side of the menu, do you think this would be easily done using your setup?

    1. Marcy Diaz Avatar

      I’m sure you can add a ribbon to the end, Steph. You would be adding to the nav menu bar, so I would think you could follow any ribbon tutorial and adapt it to your website CSS. I haven’t ever added a ribbon though. All the best with it!

  9. Adam Avatar
    Adam

    Hi Marcy,

    And like everyone else, thank you so much for the tutorial. Kelly from Studiopress sent me this way. Glad she did!!

    I’m sorry to be asking this on your comments, but if you have a minute to point me in the right direction, it would be greatly appreciated!

    I’m trying to customize my family’s Magazine Pro Theme before I redeploy from Afghanistan. I already have a logo image on the left of the Header, but I want to add an additional Family Pic (Headshot) on the right that acts the same as your tutorial. Both Michael Hyatt and Ron Edmonson are good examples as they have head shots that are placed independently of the Header Logo.

    Can you please point me in the right direction? I understand if you’re too busy, or I’m way out of my league.

    Thanks again,
    Adam

  10. Adam Avatar
    Adam

    Great tutorial, Marcy! Disregard my previous comment, I figured it out!

    Thanks again!
    Adam

    1. Marcy Diaz Avatar

      Thanks for stopping by, Adam! I’m not usually awake at 3:00 am PDT, so I’m glad you figured it out. :)

  11. Michael Avatar
    Michael

    Marcy, thank you for the tutorial. I’m using 2.1.2 Genesis Sample Theme with support for genesis.custom.header so I can upload the logo file directly in the admin area. In my next step I’m trying to add background to the header area only from an image file in CSS (I can’t do that from the admin area – background options are limited to the entire site). I’m doing this by adding the last line of code with the background property.

    #header {
    border-bottom: 2px solid #1e1e1e;
    min-height: 120px;
    overflow: hidden;
    padding-bottom: 32px;
    padding-bottom: 2rem;
    background: url(”http://localhost/mojaeme/header-background.png’)
    repeat top left;
    }

    With this code background doesn’t display. Oddly, it does display when I change header from image to text in the admin area. Do you think there’s any easy way to make the theme keep both the background and image logo in the header?

    Let me just mention that I tried removing support for genesis.custom.header so that I could control both logo and header background from CSS. With my limited skills I could only get as far as displaying the background. There’s no way I can get the logo to show up. How would you go about this problem?

    1. Marcy Diaz Avatar

      Thanks for stopping by, Michael.

      But there is nothing odd about the background you have above not displaying.
      There is no selector #header in Genesis Sample 2.1.2. There is .site-title or .site-header.

  12. Jennifer Avatar
    Jennifer

    Hi Marcy,

    Fantastic tutorial. As many others have said, I also greatly appreciate the very thoughtful and thorough explanation of the CSS.

    I changed the CSS so the bottom edge of the logo is aligned with the bottom edge of the navigation menu. My question: How do I tighten up the space between the bottom edge of the logo/nav menu and the top edge of the body content area? The site is currently in “coming soon” mode, but I would be happy to give you a temporary login (off thread) if you would like to see the code.

    Thank you in advance!

    1. Marcy Diaz Avatar

      I’m glad this tutorial helped you with your website header, Jennifer.

      I think if you look at the CSS explanation for Step 3. of the tutorial, and adjust the padding-top on .site-inner (use a number smaller than 80px), you should be on the right track. If you aren’t using a Genesis theme, you will need to figure it out.

      (BTW, I don’t accept a login without a signed agreement; too much risk for me. :)

  13. Jennifer Avatar
    Jennifer

    Hi Marcy,
    Thanks for your quick reply. I’m using Genesis/Executive Pro and I had already changed the padding between the content and the logo to 0px/0rem:
    .site-inner {
    padding-top: 0px;
    padding-top: 0rem;
    }
    Is there something else I should be doing in step 3?
    Thanks again.

    1. Marcy Diaz Avatar

      I’m sorry you’re having difficulties, Jennifer.
      You can look at the height, padding, and margins of .site-header, and all the elements it contains, and also the particular .genesis-nav that you are using. Look at margin on .site-inner. I add different color backgrounds to all elements, so I can see and understand what’s going on when I troubleshoot, so you can try that. Just be sure to remove the extra colors when you’re finished.
      I can’t see what you did, so there’s nothing more I can recommend.

      If there is nothing extra there, you can try using negative margin on .site-inner to move it up. Then you may need to use negative margin on the .footer-widgets, and .footer, and you will probably need to remove all the negative margins in your media queries. It’s a last resort, and I don’t recommend it unless you understand what you are doing.

  14. hasee Avatar
    hasee

    Hello. thank you so much for this tutorial . It helped me a lot. Could you please tell me how to reduce the space between primary and secondary menu bar?

    1. Marcy Diaz Avatar

      I’m glad you’re able to use the tutorial, hasee.

      Try looking at the height, padding, and margins of .site-header, and all the elements it contains. If you have a height on .site-header, just remove that line, or reduce any padding or margins, you may have added.

  15. hasee Avatar
    hasee

    I figured it out Marcy :) Thank you so much. It was the min-height of site-header, I set it to 0px. It worked :)

    1. Marcy Diaz Avatar

      That’s great, hasee!.
      It might be better just to comment out the min-height line, like this:
      .site-header {
      /* min-height: 0px; */
      }

  16. Steve B Avatar
    Steve B

    Many thanks for putting all that effort into this piece. Strange (or maybe not) but the 2 best guides to Genesis blogs are written by gals

    I am not sure if what I want to do is doable but I am trying to incorporate this with using the my sticky menu plugin, Unfortunately so far the logo whist appearing on the original menu won’t appear on the sliding sticky one, ah well

    Once again many thanks for this article

    1. Marcy Diaz Avatar

      Thank you, Steve. I think that most of the sticky menus use a custom menu in the header right widget area. This tutorial uses the primary navigation. I haven’t looked into using the header menu for this effect.

  17. Steve B Avatar
    Steve B

    Thanks for getting back to me, I actually added a logo to the sticky, by using background image and not needing to use this code at all, as I already have a logo in place above the menu. I have filed this article for another site.

    Steve

  18. Pieter Avatar
    Pieter

    Hello,

    would this work with other wordpress themes as well? (I’m working with Catch Evolution)

    thank you,

    Pieter from France

    1. Marcy Diaz Avatar

      Hi, Pieter, this will probably not work well for other themes, as the selector names are probably not the same. If you know a bit of CSS, you could try to match the CSS selectors in my tutorial to those in you theme. All the best!

  19. Christian Avatar

    Hello Mrs Diaz,

    thank you soooo much for this Guide. Finally there is someone who can tell how to include the logo-image into the top-navigation within the Genesis Child Theme.
    I included your Code into my site and I am quite happy with it. But how can I make it happen that the logo-image (like the other menu Links) is centered? You know, I want to create kinda apple-like Navigation and there, the first menu link is the logo-image and this is something I want to achieve as well. But I don’t know how to move my logo-image from far left to make it more centered and make the whole menu look smooth and as one harmonious menu. So that the logo-image lies beside the first menu link. I am sure (but hope nonetheless) that you could help me with this. My site-url included in the above field.

    Thank you again for all your work.

    Kind regards
    Christian

    1. Marcy Diaz Avatar

      Thank you for your kind words, Christian. Your site is not working, so I’m not able to look at it.
      To add an icon, you would add a CSS class to your first menu link, so that you can style that link differently than your other menu items. Then you would hide the text with CSS, and then add the logo as a background image. Well, I’m sure there are other methods too. To be able to add a CSS class to that link, you need go to Appearance > Menus. Look in the upper RH corner, and click on Screen Options, and then check CSS classes.
      I haven’t done this, so that’s the most help I can give you right now. All the best!

  20. Christian Avatar
    Christian

    Hi Marcy,

    it now works brillantly, your tip was awesome and really made my day!
    When you say:

    “…Your site is not working…” how can I ensure that my site is working correct? Is there an online tool or so to check a website’s health? Every Webmaster wants to ensure, that his site is going well and not being suprised badly.

    Thank you again, Marcy, I wish you an awesome DAY.
    Christian

    1. Marcy Diaz Avatar

      Oh, I like it, Christian! I’m not sure why your website page was not showing when I looked earlier; I was only there a moment, and didn’t look to see why. It may have been that you were updating a plugin or something like that. Sometimes the hosting server will have maintenance too. That’s all normal.
      All the best!

  21. Med Avatar
    Med

    Sorry but for:
    remove_action( ‘genesis_after_header’, ‘genesis_do_nav’ );
    add_action( ‘genesis_before_header’, ‘genesis_do_nav’ );
    Only the second function works as the nav bar remains in place and the new one before the header appears so we get two nav bars

    1. Marcy Diaz Avatar

      This is the exact code in the StudioPress Code Snippets section. Be sure that You use a text editor to edit your code, and that your quotes are straight and not curly. All the best.

      1. Steve Brickle Avatar
        Steve Brickle

        Many thanks

      2. Med Avatar
        Med

        Yes sure, I’m using Notepad++ and also this is not the only code tha didn’t work for me, even from StudioPress Code Snippets section, the problem is with remove_action as add_action works well, it adds the new nav bar, but the first nav bar doesn’t disappear. I’ts not just this code snippet. and I’m on Genesis 2.1.2. Thanks.

  22. Lance Avatar
    Lance

    Hi Marcy,
    I’ve just run through this workshop to place the sites logo to the left of the nag bar but now trying to get it all to be mobile responsive and not sure which direction to go, or if this is even possible now that the logo is sitting on the nag bar?

    Have enjoyed this article, its really well written and easy to understand and has been a great help,
    Thanks,
    Lance.

    1. Marcy Diaz Avatar

      Yes, Step 4. discusses some options for a mobile menu.
      Since many themes center the logo and move the menu down below first, and then at an even smaller screen size, add the mobile menu icon, you can use what is already there.

      Have you tried it with your theme and your theme mobile menu?

      If you want to leave the logo on the left and have the menu change directly to the mobile menu icon, just remove the CSS parts that center the logo and menu, and allow it to go directly to mobile from the positions they are now. You may need to adjust some padding or margin, so that the menu is not below the logo. It’s a bit different for every theme.

  23. Lance Avatar
    Lance

    I’m using the sample theme from genisis and have just figured out some of what I’m after. There are three screen widths in the Media Query section and I was unsure of which one to place the code into,
    (1200, 960 and 800). I’ve placed the code into all three and it works but the logo pops in underneath the menu when the screen is shrunk. Going to have a look through to see if I can figure this out now, but if you have an easy answer that would be great.

    Thanks for your time Marcy

    1. Marcy Diaz Avatar

      Hi, Lance. The logo CSS should be in the top section of style.css, not any of the @media sections.

      Step 3. does move the logo back below the navigation, so the responsive menu will work at small screen sizes because that’s the way I wanted it to work, and it’s easiest for a tutorial of this nature.

      I just mentioned that the logo and the menu icon could be left inline, but you have to be capable of doing it. It’s not part of the tutorial.

      If you follow the tutorial steps carefully, the logo and navigation WILL work at both large and small screen sizes. All the best!

  24. Demitrius Avatar
    Demitrius

    God bless your soul. I have been searching for this info for 72 hours. Worked the first go round. We should be paying you for this!

    1. Marcy Diaz Avatar

      Thanks for letting me know that the tutorial was helpful, Demitrius!

  25. Anna Avatar
    Anna

    Hello Marcy,
    Your code is very helpful and your explanations are great as they help me understand and learn the code. I have added a logo to the navigation menu on my sample theme following your instructions and it works great. However, it does not look good on mobile devices. How do I add a responsive menu icon (similar to the hamburger icon) to the primary navigation menu and have it open and close? I have tried following your other tutorials but I am not having success combining with the logo siting on top of the navigation menu. Can you please help point me in the right direction? Any advise will be much appreciated.

    1. Marcy Diaz Avatar

      Thanks for your kind words, Anna.

      I don’t recommend trying to do two tutorials until the first tutorial works. For this tutorial, Step 4. helps center the logo and the navigation menu at smaller screen sizes, just as the Genesis Sample theme logo and menu are centered. Then once you have that working, you can try to add a hamburger navigation. I haven’t done a tutorial with those two together. I hope you get it worked out.

  26. Richard Brown Avatar

    Hi Marcy

    Thanks for the tutorial. I have a bizarre thing happening and hoping you might be able to shed some light please? Before I read your tutorial I added the code to move the nav to before the header and yet nothing happened. I then saw your site and added the changes you suggested but the nav still hasn’t moved. Any ideas please?

    Thanks

    Rich

    1. Marcy Diaz Avatar

      You’re welcome!

      I’m sorry you’re having difficulties moving the navigation menu. I have no way of knowing what other code you have in your theme, so I can’t really help. There are other code snippets in your my.studiopress.com logged in area that could help you, or perhaps there is another set of menu code in your functions.php that undo what you added. All the best!

  27. Samantha R Avatar
    Samantha R

    What a great tutorial! I want to do this sort of thing on a Thesis Classic Responsive layout.

    I have a “Headshot in Header” widget that I’m trying to use to accomplish this. I’m fairly certain that it can be done.

    Basically, I just need to bring the picture over the top of the menu there.

    Can you help me?
    Thanks,
    S

    1. Marcy Diaz Avatar

      Thanks for your comment! If you’re using Thesis, you can follow the same steps in the tutorial, but apply it to the Thesis code. Or perhaps you can find a Thesis tutorial or forum. All the best!

      1. Samantha R Avatar
        Samantha R

        Thanks Marcy, will try this and see if it works. I’ve already searched for Thesis tutorials with no luck.

  28. Brittney Avatar
    Brittney

    Thank you so much for such an in depth tutorial! One question though, my logo isn’t displaying at all. Everything is in the right place except I just can’t view my logo. Also there’s a lot of space below my menu before my page starts. How do I fix this?

    1. Brittney Avatar
      Brittney

      Ok, I figured out how to get the logo there and I think I padded it so it displays properly but I still can’t figure out how to get rid of all the extra space before the body of my page starts… (and there’s padding on top of the menu/navigation that I’d like to decrease as well)

      1. Marcy Diaz Avatar

        You’re welcome, Brittney!
        Your questions are covered in the “Explanation of the CSS in Step 3”.
        You probably want to adjust the top: 40px; line in .header-image .site-title a selector.
        You also want to remove some or all of the padding-top: 80px; (and 8rem) on site-inner.

      2. Brittney Avatar
        Brittney

        Perfect! That did it! You’re the best. So very helpful!

      3. Neil Avatar
        Neil

        Hi Marcy,

        I’m having the same trouble here: strongerleaner.com.

        I’ve changed the padding and the top: setting here:

        .site-inner {
        padding-top: 20px;
        padding-top: 2rem;
        }

        …and…

        .header-image .site-title a {
        float: left;
        min-height: 160px;
        background: url(images/logo.png) no-repeat left;
        border: 1px solid #333;
        padding: 0;
        display: block;
        top: 0px;
        position: absolute;
        width: 420px;
        }

        But the content isn’t moving up at all. Am I missing something?

        One unrelated question: my logo seems to be far too wide (you can’t click on the menu links because they’re all behind the logo). See how the border extends all the way to the right.

        How do I change this?

        Thanks so much for this awesome tutorial!

      4. Marcy Diaz Avatar

        You have another widget area between the header and .site-inner. Perhaps you can add a negative top margin to it to move it up.

        If you want your logo smaller, change the width:420px to something smaller and adjust the min-height to match.

      5. Neil Avatar
        Neil

        Hey Marcy,

        Ah it’s the widget area–thanks!

        As for the logo, I don’t want to make the logo smaller; I just want the clickable logo area to stop extending all the way toward the right. Do you see what I mean? You can’t click on any of the menu links.

      6. Neil Avatar
        Neil

        Oh, I figured it out – it was in the wrong spot. :)

  29. Brittney Avatar
    Brittney

    One final question… the logo doesn’t move together with the navigation if someone closes the top bar. It stays while the rest of the page moves up and it makes the logo cover some of the content in the body of the page. How do I get it to be flexible too?

    1. Marcy Diaz Avatar

      You have to let .header-image .site-title a go to position: relative; when the menu becomes centered.
      It also looks like you may have 2 logos. What you’re doing is a bit beyond the tutorial.

      1. Brittney Avatar
        Brittney

        That’s odd. I definitely only have one logo but when I change it to relative, I see two of the same. How on earth is the logo being displayed twice? The relative solved it in the terms of it’s now moving with the navigation bar… the problem now is that there’s two…

  30. Akash Sharma Avatar

    My logo is appearing in the centre rather in left. i Want it to be appear in left. what to do /?

    1. Marcy Diaz Avatar

      I’m sorry to hear that. Perhaps you can follow the tutorial again.

  31. Steve Brickle Avatar
    Steve Brickle

    Good Evening Marcy,

    Could this be adapted to put the site title on the bar rather than the logo? If so a few hints would be hepful

    In eternal hope

    Steve

    1. Marcy Diaz Avatar

      I haven’t created a tutorial on using text only, Steve. It’s much the same as the logo, but to start, you would need to look in style.css at the CSS for .site-title without .header-image in front. The other option is to make a logo the correct size for your theme with just the text, and use that.

  32. Steve Brickle Avatar
    Steve Brickle

    So quick, thank you.

    I will probably take the “cheat” route and create a logo out of the text

    Steve

  33. Jenn Avatar

    This is the BEST tutorial about this out there!!! I have searched for a long time. Thank you SO much!!!

    One question, though… At smaller screen sizes, would I be able to keep logo to the left, and the hamburger menu to the right, instead of the hamburger menu being above the logo?

    1. Marcy Diaz Avatar

      Thank you! I’m glad it helped!

      Yes, you can keep the logo and the menu inline. This site does it at small screen sizes. You can use Chrome Dev Tools to inspect and view the CSS.

      1. Jenn Avatar

        Hi Marcy! I’m wanting to delete this function now from my functions.php file, but when I do, it’s saying “Unable to communicate back with site to check for fatal errors, so the PHP change was reverted. You will need to upload your PHP file change by some other means, such as by using SFTP.”

        No clue what that means… Help please! Thanks!

      2. Marcy Diaz Avatar

        A security plugin may be blocking editing directly in the Admin, but that’s not a good thing to be doing anyway.
        Log in to your hosting, and use the File Manager to edit the functions.php file.

        You can edit it directly, but it’s best to download, so you have a copy, then edit it and upload the changes.

  34. Petri Avatar
    Petri

    Hi Marcy,
    Your tutorial is exactly what I’m looking for, however, for me it doesn’t work with the actual sample theme (2.3.0), do you think it should still work with this version?
    I have the nav-primary below the header, I would like to position an image left on this nav-primary menu (that I would like to stay below the header).
    Thanks in advance for your opinion!
    Petri

    1. Marcy Diaz Avatar

      It looks to me like the tutorial should still work OK using the nav-primary with the logo. The tutorial started with a nav-primary that was below the header too. Just follow the steps. I haven’t tried it out, but I’ve done something similar with that Sample theme version.

  35. Ashok Kumar Avatar

    I am using Magzine Pro theme with Genesis framework this is not working for me. Please give me some suggestion

    1. Marcy Diaz Avatar

      It may be the z-index.
      Look at the z-index in your nav-primary and then add a z-index to
      .header-image .site-title a
      that is a little bit larger.

  36. PaulR Avatar

    Marcy,

    I like the website you referenced in your tutorial, but actually I like how you put your logo on your nav bar, where on my desktop it remains stuck as you scroll down. How’d you do it, or is it set in your child theme?

    Thanks,
    PaulR

    1. Marcy Diaz Avatar

      My theme is custom, and the fixed header is part of the theme.
      You can purchase a number of Genesis themes that have this feature.

  37. Glenda Avatar

    Marcy,

    I have two navigation bars with this code. I can’t figure out what I’m doing wrong.
    Can you help?

    1. Glenda Avatar

      Hey, I got it figured out! Thank you for the code!

  38. Tiny Avatar
    Tiny

    `Hi. Thank you for the amazing tutorial. I’m facing a little problem though. Can you please help me?

    1. My logo is stuck behind the navigation bar. I can’t bring it forward.

    2. I want to pull the navigation bar at the top and logo as well. But whenever I pull the primary navigation bar at the top, the logo doesn’t move up. It’s stuck there below.

    Waiting for your kind suggestions.

    1. Marcy Diaz Avatar

      The z-index on your menu is 999. So you need a z-index larger than that on the logo.
      This seems to work, if added to Appearance > Customize > Additional CSS

      .custom-logo-link, .wp-custom-logo .title-area {
          max-width: 360px;
          position: absolute;
          top: 0px;
          z-index: 1100;
          display: block;
          width: 360px;
      }
      
      1. Tiny Avatar
        Tiny

        thank you very much. it worked.

        I hope I’m not bothering u too much. My logo is not remaining fixed on the navbar while scrolling down. I made header-image .site-title a go to position: relative; but not working. And what can I do about the mobile menu?
        Can you please suggest any remedy

        Thanks again

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.