Rajesh Rathod

Available for New Projects

Adding a Background Image to Mobile Navigation Menu in WordPress

Written by

Rajesh Rathod

in

Suppose, I want to add image in background for my navigation menu on mobile devices and keep site Logo at its original place (and visiable), how do I do that?Edit

To add a background image to your mobile navigation menu while keeping your site logo visible in its original position, follow these steps:

Method 1: Using CSS (No Plugin)

Add this CSS to your theme’s “Additional CSS” section (Appearance > Customize > Additional CSS):

css/* Target mobile devices */
@media (max-width: 991px) {
  /* Style the navigation menu container when expanded */
  .main-navigation.toggled ul,
  .mobile-menu-active .main-navigation ul,
  .navbar-collapse.show,
  .menu-primary-container,
  .menu-container-mobile {
    background-image: url('https://your-site.com/wp-content/uploads/your-background-image.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    /* Add more styling as needed */
    padding: 20px 0;
    margin-top: 10px;
  }
  
  /* Ensure logo remains visible when menu is expanded */
  .site-branding,
  .navbar-brand,
  .site-logo-div,
  .custom-logo-link {
    position: relative;
    z-index: 1001; /* Higher than mobile menu */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

Method 2: For More Control (Child Theme Approach)

If you need more control, create a child theme and modify the mobile menu template:

  1. Create a child theme if you don’t have one already
  2. Copy your parent theme’s navigation template file (often navigation.php, menu.php, or within header.php)
  3. Add a container div around the mobile menu items with a class like mobile-menu-background
  4. Style this container with your background image

Method 3: Using Page Builders

For Elementor:

Elementor Mobile Menu Background CSS

/* CSS for Elementor Mobile Menu Background */ 
/* Target Elementor's mobile menu */ 
@media (max-width: 767px) 
{ /* Style the mobile menu container */ 
.elementor-nav-menu--dropdown, .elementor-menu-toggle.elementor-active + .elementor-nav-menu-

For Divi:

css@media (max-width: 980px) {
  /* Style mobile menu container */
  .et_mobile_menu {
    background-image: url('https://your-site.com/wp-content/uploads/your-background-image.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
  }
  
  /* Add overlay for better text visibility */
  .et_mobile_menu:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1;
  }
  
  /* Ensure menu items are above overlay */
  .et_mobile_menu li {
    position: relative;
    z-index: 2;
  }
  
  /* Keep logo visible */
  .logo_container {
    position: relative;
    z-index: 99999;
  }
}

Method 4: Using a Plugin

You can use the “CSS Hero” or “Microthemer” plugin to:

  1. Target your mobile menu container with their visual selectors
  2. Add the background image property
  3. Style text elements for visibility
  4. Add z-index to your logo

Troubleshooting Tips:

  1. Finding the correct selectors: Use browser dev tools (F12) to inspect your mobile menu when toggled open to find the exact class names
  2. Image sizing: Make sure your background image is properly sized (approximately 600-800px wide)
  3. Text contrast: Add a semi-transparent overlay or text shadow to ensure menu text is readable
  4. Logo visibility: If your logo disappears, adjust the z-index property to be higher than your mobile menu

More posts