Adding a Text/Image logo to Menu bar that shows only on mobile

Thanks mayurjango.. I would also like to have this feature..

Here’s one way to do it:
1. Copy header.php to your child theme.
2. Replace this code:

<div class="nav-text"><!-- put your mobile menu text here --></div>

with something like this for text:

<div class="nav-text">My Topbar Text</div>

or this if you’ve created a custom sidebar for ads:

<div class="nav-text"><?php dynamic_sidebar('my-post-ads'); ?></div>

3. Add this to your child theme css:

#nav-topbar .nav-text {
  display: none;
}
@media only screen and (max-width: 719px) {
  #nav-topbar .nav-text {
    display: block;
    width: 50%;
    margin: 0 auto;
    font-weight: 600;
  }
}

I tested the css with the text but you might have to adjust it a little if you use a sidebar.

Hi bdbrown,

That worked well up to an extent when using text. You’re amazing!

I’ve some queries though –

1. When adding an image/text in header, I’m unable to align it to center and define exactly same padding for top & bottom.

2. How to hide main logo (big one) when page resolution reaches above 719px.

3. Is it possible to implement this change on all pages except homepage.

When I add the below code for logo image in header, the Nav bar breaks in desktop resolution.

<div class="nav-text"><a href="https://webtrickz.com/"><img src="https://webtrickz.com/wp-content/uploads/2014/12/wt-logo-is.png" width="210" height="35"></div>

Please suggest the best size (height) for the logo that should appear properly.

Test site: https://test.webtrickz.com/

P.S. I prefer using logo image instead of text as it looks better.

Thanks a lot!

Screenshot (when using logo image): https://goo.gl/uqHz2D

1. If you’re referring to the main header logo in desktop view, try this to center it:

#header .site-title {
  float: none;
}

2. To hide the main header logo above 719px try this:

@media only screen and (min-width: 720px) {
  #header .site-title {
    display:none;
  }
}

3. To apply the changes to all pages except the home page, add the page identifier in front of #header, for example:

body:not(.home) #header .site-title {
  float: none;
}

Thanks bdbrown for your reply.

Please help me fix this:

1. I’m referring to center the header logo in mobile view. The one added in navigation bar.

2. I’m able to hide Main header logo on mobile resolution but how can I apply this change on all pages except home. Plz give exact code as I’m unable to do that with css.

3. The Navigation bar is breaking for some reason in desktop resolution on all pages except home. Apparently, when logo is shown in nav bar.

Please provide a solution to above. Rest is working fine! ??

1. I don’t see a header logo in the navigation menu in mobile view.

2. See #3 above. You would use that example to adjust the media query you are currently using to hide the main header logo. Just put “body:not(.home)” in front of the current css.

3. Your navigation menu is broken due to multiple unassociated anchor tags in the topbar. See this screenshot. The tag outlined in red is the one causing your menu to expand vertically. Remove that anchor tag and your menu will be one row. Interestingly enough, if you click on the fa icon above the “Android” menu item, it expands into an entirely different menu on your live web site.

Hello bdbrown,

1. The header logo in navigation menu is visible on all pages except home. I want to center align it but can’t figure out how to do that.

Screenshot: https://goo.gl/pTt3ZL

2. Surprisingly, that worked now.

3. Could you please guide how to remove that anchor tag. Things seem fine in Appearance > Menus though.

Also, could you please check and tell if my live site webtrickz.com also has such multiple unassociated anchor tags in the topbar or not?

I really appreciate your help. You’re awesome sir. ??

Edit: Fixed 3rd one. I missed </a> at the end in header.php. ??

Help me with just #1 query.

Hi,

Please help me center align the logo when viewing on mobile on all pages except home.

Test site: test.webtrickz.com

Give this a try and see how it works:

@media only screen and (max-width: 719px) {
  #nav-topbar .nav-text {
    display: block;
    width: 220px;
    margin: 0 0 0 -110px;
    padding: 8px 0;
    position: absolute;
    left: 50%;
  }
}

Hi bdbrown,

wow… That worked finally! I’m also learning a bit of CSS now, all credits to you. ??

Now have everything exactly as I thought.

But I’m amazed to see that so many elements are required here just to center the logo in nav menu. Can you tell, why so?

Anyways, Thanks a ton for your help. ??

There is a great article here titled How to Center Anything with CSS. Scroll down about 1/2 way to find the “With Fluid Width” section. That gives a good explanation.

Hi Bd brown, can i asking to this thread?
It works for me to add nav.text.
Now, how to adding link in nav.text?
I want this text as my link to home

@densahmad – it would be best if you started your own topic. You can reference this one if it’s related.

@mayurjango – If you don’t need any further assistance here please mark the topic as resolved. Thanks.