Help with Image in Menu?

  • Resolved corrinarusso

    (@corrinarusso)


    3 years, 6 months ago

    Hi group –

    Please see screenshot of the page mockup from the designer:
    https://postimg.cc/WdfqMF9S

    Please see screenshot of my page development:
    https://postimg.cc/SJ1cGvRW

    I’m using this markup in the menu item (Admin –> Menu –> Custom Link):
    <img src="/wp-content/uploads/2021/05/Accreditation-seal.png" id="acc-size" style="vertical-align: middle;" />

    and this in my CSS:
    #acc-size { width: 80px; height: auto; }

    Guess it’s not working bc it is just another li in a group within the ul.

    Any bright ideas, or better ideas on how to impelement the logo in the header menu as displayed in the mockup?

    Instead of using the menu, I could use the menu template file – but then I’d lose the native functionality provided by the menu.

    • This topic was modified 3 years, 6 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter corrinarusso

    (@corrinarusso)

    I’ll close this ticket as resolved – fyi for others, I ended up using the menu template file in my child theme and it works well:
    https://postimg.cc/t7XWPxpQ

    I’ll add some css to display:none on mobile.

    MK

    (@mkarimzada)

    Hi there,

    I think it’s better to keep the logo separate from navigation since logo needs organization schema if that makes sense and matters to you.

    Just wrap the logo with a div and put it right after wp_nav_menu() in your header/custom header, then you could style it however you want.

    To achieve the same looks as supplied UI, here is a small snippet using flexbox. https://postimg.cc/dZwZBspq

    <div class="parent-wrapper">
  <ul class="menu">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
  <div class="logo">
    <img class="site-logo" src="" alt="">
  </div>
</div>
    .parent-wrapper{
  background-color: #e7e7e7;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  
  .menu {
    list-style: none;
    
    li {
      display: inline-block;
      margin-right: 2rem;
    }
  }
}
    Thread Starter corrinarusso

    (@corrinarusso)

    @mkarimzada

    This is great – thank you for taking the time to provide a detailed reply.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Help with Image in Menu?’ is closed to new replies.

Tags