I'm seeking some assistance with an issue I'm having in the development of a website for one of my clients. On desktop everything is fine however, on mobile devices the sliding sidebar/navigation has the logo that I would like removed. I've tried various solutions found through generic searches online to no avail. The site I'm inquiring about is Easter Seafood Enterprise Limited. Is there any solution or CSS I can add to resolve this? P.S the logo on the page is fine and should remain it's only the logo in the sidebar (mobile devices) that I'd like removed.
CodePudding user response:
If there is no way to remove the logo in the mobile navigation drawer for your theme via the Customizer or via Theme Options/Settings, then you can accomplish this with the following CSS:
.navbar-mobile .logo {
display: none;
}
If you right click on your navbar and click inspect element, you should see that the class:
"navbar-desktop" <div id="navbar" data-mobile-screen-width="1200">
is being replaced with "navbar-mobile" at the 1200px breakpoint: <div id="navbar" data-mobile-screen-width="1200">
.
So you can use this .navbar-mobile class to target the mobile logo in the navigation drawer only by using the above CSS.
If you don't want to use CSS to accomplish this, another way is by copying the navbar.php file (or whichever file has the code to display the navbar) from your parent theme to your child theme and remove/comment out the line that adds the logo in the mobile navigation drawer.