[Resolved] Site title next to site logo in menu

Home Forums Support Site title next to site logo in menu

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1285060
    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.

    Usual environment: Mac OS 10.15.7
    Also iPad Pro, usually the latest iOS
    #1285249
    David
    Staff
    Customer Support

    Hi there,

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

    #1286398
    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;
    }
    }

    Usual environment: Mac OS 10.15.7
    Also iPad Pro, usually the latest iOS
    #1286604
    Leo
    Staff
    Customer Support

    How are you adding the image in the secondary navigation?

    #1286634
    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

    Usual environment: Mac OS 10.15.7
    Also iPad Pro, usually the latest iOS
    #1287201
    David
    Staff
    Customer Support

    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>

    #1287671
    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?

    Usual environment: Mac OS 10.15.7
    Also iPad Pro, usually the latest iOS
    #1287679
    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.

    Usual environment: Mac OS 10.15.7
    Also iPad Pro, usually the latest iOS
    #1287742
    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;
       }
    
    }
    Usual environment: Mac OS 10.15.7
    Also iPad Pro, usually the latest iOS
    #1287825
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Give this a shot:

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

    Thanks, Tom — that solved the last of it.

    Usual environment: Mac OS 10.15.7
    Also iPad Pro, usually the latest iOS
    #1288864
    Tom
    Lead Developer
    Lead Developer
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.