How to Remove the Mobile Menu Outline in the Astra WordPress Theme Using Custom CSS

If you’re a web designer or developer that uses the Astra WordPress theme, you may have noticed an outline that appears on the mobile menu after a user taps the hamburger icon.

astra theme mobile menu minimal setting in customizer

The outline is visible if you’re using the minimal setting and it appears thin, dotted, and unexpected. As a designer who likes to control each and every pixel I possibly can, seeing this artifact bothers me visually and detracts from the intended design. 

Fortunately, removing the outline is simple with a little bit of custom CSS. You can add the CSS to your theme a few different ways, you just have to factor in whether or not you’re using a child theme.

After inspecting the code, you’ll notice that the outline only gets applied after the user taps the hamburger menu, known as the focus state. So in our CSS code, we’ll want to specify the changes to take place on the specific elements in the :focus state.

In addition to the screen capture above showing the outline when the menu is active, you might have noticed a brief outline displayed after you tapped the hamburger menu to trigger the off-canvas menu to be visible. Let’s go ahead and remove that outline as well. In case you missed seeing it, below is an example.

Now that we’ve identified the items we need to target, we’ll need to add a snippet of code to our theme. We can do that one of two ways and that will depend on whether or not you’re using a child theme. If you’re not using an Astra child theme, I highly recommend that you consider one for your next project. 

A child theme in WordPress is essentially a separate theme that inherits the functionality and styling of another theme called the parent theme. Child themes allow you to code custom styles, templates, and functions without altering the original core files of the parent theme. 

Using a child theme is important because if you customize the parent theme’s files, you run the risk of having your custom code overwritten by new files if someone performs an update to the theme. Not only that, it’s much easier to maintain because all of your customizations are consolidated in their own place. 

Let’s get back to why you’re here, the removal of the outline on the mobile menu after a user taps while using an Astra WordPress theme. 

remove the mobile menu outline using the astra theme customizer.

If your site is built using the Astra parent theme, you’ll want to add your custom CSS through the Customizer. 

Log into the WordPress dashboard and navigate to Customizer > Additional CSS.

Next, add the following code snippet to the Additional CSS window and Publish your changes. 

/* fix hamburger menu outline */
.ast-button-wrap .ast-mobile-menu-trigger-minimal:focus {
    border-width: 0px !important;
    outline:none;
}
.ast-mobile-popup-drawer.active .menu-toggle-close:focus {
    border-width: 0px !important;
    outline:none;
}

What the above code does is set the outline of the hamburger menu to 0px, with an outline treatment of none. By adding this code it instructs the browser to show nothing.

applying the same fix to menu dropdowns on mobile.

If your website has a dropdown menu or mega-menu on mobile devices, you might have noticed the outlines visible there too after a visitor expanded the top level menu item.

In order to apply the fix to the dropdowns, you’ll want to add the following CSS code to your stylesheet.

/* fix outline for mobile dropdown menu */
.ast-builder-menu-mobile .main-navigation .menu-item.menu-item-has-children > .ast-menu-toggle {
  border-width: 0px !important;
  outline:none;
}
.ast-builder-menu-mobile .main-navigation .menu-item.menu-item-has-children > .ast-menu-toggle:focus,
.ast-builder-menu-mobile .main-navigation .menu-item.menu-item-has-children > .ast-menu-toggle:hover {
  border-width: 0px !important;
  outline:none;
}

adding the css to your astra child theme style.css file.

If you’re using a child theme, you can either add the CSS using the Customizer as shown above, or you can add the CSS snippet to your child theme’s style.css file.

After you’ve added the snippet of code to your child theme style sheet, upload the file to your web host and into the appropriate child theme directory.

Reload the site in your browser and test. If you don’t see the fix immediately, try doing a few hard refreshes in your browser and clearing your website cache.

Just like that, with just a few lines of code we were able to remove the outline that displays when a user clicks the mobile menu in the Astra WordPress theme.

let's work together.

Request a quote and we'll schedule a free consultation to discuss your project and learn how I can help your business, organization, or startup.

Scroll to Top