How to add a logo in mobile menu (CSS CODE)

HTML-CSS
1

mobile
mobile664×709 127 KB

How do I add my logo at the location indicated? I’ve tried in many ways and I can’t.

https://arenawebdesign.com/marketing-digital/

2

Hello, Pinky.

The quickest method would be to include your logo as a child of one the li elements.

<ul id="mobile_menu" class="et_mobile_menu" style="">
    <li style="padding: 5%; padding-bottom: 100px;">LOGO</li>
 <li id="menu-item-214835" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-214835 et_first_mobile_item"><a href="https://arenawebdesign.com/">Início</a></li><li id="menu-item-214840" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-214840"><a href="https://arenawebdesign.com/plugins-wordpress/">Plugins WordPress</a></li>
 <li id="menu-item-214846" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-214846"><a href="https://arenawebdesign.com/planos/">Planos</a></li>
 <li id="menu-item-214849" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-214848 current_page_item menu-item-214849"><a href="https://arenawebdesign.com/marketing-digital/" aria-current="page">Marketing Digital</a></li>
 <li id="menu-item-214852" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-214852"><a href="https://arenawebdesign.com/como-criar-um-site/">Criar Site</a></li>
 <li id="menu-item-221920" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-221920"><a href="https://arenawebdesign.com/produtos/">Produtos</a></li>
</ul>

If you paste that into your HTML file, you will be able to see what I did, and replace it with your actual logo. NOTE: You need to remove the padding-top of your ul.

Hope this helps.

2 Likes
3

Sorry for the ignorance, but I was unable to edit the HTML. I currently use a theme builder (divi builder). I have made all the changes to the CSS. Could you help me? I’m new to this area.

1 Like
4

You can try using a pseudo-element. Replace the url and position as needed.

ul#mobile_menu::before {
  content: url(https://via.placeholder.com/100x40);
  position: absolute;
  top: 55px;
  left: 175px;
}
2 Likes