[Resolved] Site title next to site logo in menu

[Vera]

I have a small site logo image at the left side of my right-aligned secondary menu — the gray bar at the very top of the page. I need the site title to appear directly to the right of the site logo, but I can’t figure out how to make that happen. I found another forum post on what seemed to be the same topic but I wasn’t able to figure it out from that.

Can you help me? Thanks in advance.

[David]

Hi there,

can you uncheck Hide Site Title in Customizer > Site Identity – and let me know.

[Vera]

This causes a large site title to appear between my secondary menu and hero header.

Here is the css I use to position the site logo:

.secondary-nav-logo {
Float: left;
Height: 25px;
Width: auto;
Margin: 7px 7px;
border-radius: 25px;
}

@media screen and (max-width: 900px)
{
.secondary-nav-logo {
visibility: hidden;
Height: 0;
}
}

[Leo]

How are you adding the image in the secondary navigation?

[Vera]

It’s a GP hook element with this in the content area (I deleted the site info):

<img src="//www.*****.png" class="secondary-nav-logo" width=50 height=50 />

The hook is inside_secondary_navigation

Display rules, Entire Site

[David]

Sorry… obviously i didn’t read any of that regarding the secondary nav….

In the Hook Element add this after the img:

<span class="main-title" itemprop="headline"><?php echo get_bloginfo( 'name' ); ?></span>

[Vera]

No worries David — and I forgot about the hook element.

I added your snippet in the existing hook element like this…

<img src="//www.*****.png" class="secondary-nav-logo" width=50 height=50 /><span class="main-title" itemprop="headline"><?php echo get_bloginfo( 'name' ); ?></span>

…but it had no effect. (I also tried putting it on a separate line…same.) I thought maybe I should turn the title on again, but this did the same thing as before with large title. I’m not a coder so could there be some other obvious thing (though not obvious to me) I should have done?

[Vera]

I just tried replacing the php part with the actual site title and that displayed it, but too big. So I’m going to try to add some CSS.

[Vera]

Thanks for the snippet, David. With the php bit replaced and new CSS, it‘s now 90% where I want…

But I haven’t been able to get the title to center above the hamburger icon on mobile. Would you be able to help me there? Below is all my css for the secondary menu. And if you happen to see any peripheral issue in my styles that could lead to future problems (self taught so I’m lax on rules!), I wouldn’t mind correction.

.secondary-nav-main-title {
     font-size: 16px;
     font-weight: 500;
     color: #999999;
     float: left;
     margin-top: 6px;
}

.secondary-nav-logo {
      float: left;
      height: 25px;
      width: auto;
      margin: 7px 7px;
      border-radius: 25px;
}

@media screen and (max-width: 900px) 
{
   .secondary-nav-logo {
      visibility: hidden;
      height: 0;
   }

   .secondary-nav-main-title {
      text-align: center; /* no centering effect */
      margin-top: 12px auto 0 auto; /* no centering effect */
      float: both;
   }

}

[Tom]

Hi there,

Give this a shot:

@media (max-width: 768px) {
    #secondary-navigation {
        text-align: center;
    }
    
    .secondary-nav-main-title {
        float: none;
    }
}

[Vera]

Thanks, Tom — that solved the last of it.

[Tom]

You’re welcome 🙂

[Author]

Posts