Help with Image in Menu?
-
Hi group –
Please see screenshot of the page mockup from the designer:
https://postimg.cc/WdfqMF9SPlease see screenshot of my page development:
https://postimg.cc/SJ1cGvRWI’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 2 years, 10 months ago by
Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
-
This topic was modified 2 years, 10 months ago by
-
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/t7XWPxpQI’ll add some css to display:none on mobile.
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; } } }
This is great – thank you for taking the time to provide a detailed reply.
- The topic ‘Help with Image in Menu?’ is closed to new replies.