Title: Transparent Menu
Last modified: June 16, 2017

---

# Transparent Menu

 *  Resolved [jrob81587](https://wordpress.org/support/users/jrob81587/)
 * (@jrob81587)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/transparent-menu-5/)
 * I want to change my main menu color to transparent so that my header image is
   visible behind the menu. Is there a way that I can do this or maybe even change
   the menu background color so that the header image shows through but is less 
   transparent then the image so you can tell that there is some sort of menu “box”.
 * At the same time I’m going to want to make the background of my “Learn More” 
   button transparent as well.
 * Thanks.
 * [http://www.northdallasbaseball.com](http://www.northdallasbaseball.com)

Viewing 1 replies (of 1 total)

 *  [Evan Herman](https://wordpress.org/support/users/eherman24/)
 * (@eherman24)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/transparent-menu-5/#post-9242669)
 * Hi [@jrob81587](https://wordpress.org/support/users/jrob81587/),
 * You can certainly do that. It would just take a small bit of CSS to tweak things
   so they are looking right.
 * You’ll want to add the following snippet of CSS to your theme in the ‘Additional
   CSS’ section of the customizer. From the dashboard, if you head into ‘Appearance
   > Customize’ and then select ‘Additional CSS’ within the customizer, you can 
   add the code there.
 *     ```
       .main-navigation .sub-menu {
          background-color: rgba(19, 19, 19, 0.50);
       }
       ```
   
 * Moving forward, you’ll want to keep in mind that the snippet is there, as you
   may attempt to change the header background color in the customizer and it won’t
   change. You’ll want to remove this code if that is the case.
 * To alter the ‘Learn More’ button background color, you can do the same. In the
   same area of your site, you can add the following just below the one above.
 *     ```
       .primer-hero-text-widget a.button {
          background-color: rgba(0, 0, 0, 0.50);
       }
       ```
   
 * The final code snippet inside of ‘Additional CSS’ section of the customizer should
   look like:
 *     ```
       .main-navigation .sub-menu {
          background-color: rgba(19, 19, 19, 0.50);
       }
   
       .primer-hero-text-widget a.button {
          background-color: rgba(0, 0, 0, 0.50);
       }
       ```
   
 * Feel free to play around with the background-color attributes.
 * Let us know if that works for your needs.
 * Evan
    -  This reply was modified 8 years, 10 months ago by [Evan Herman](https://wordpress.org/support/users/eherman24/).

Viewing 1 replies (of 1 total)

The topic ‘Transparent Menu’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/primer/1.8.10/screenshot.png)
 * Primer
 * [Support Threads](https://wordpress.org/support/theme/primer/)
 * [Active Topics](https://wordpress.org/support/theme/primer/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/primer/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/primer/reviews/)

## Tags

 * [menu color](https://wordpress.org/support/topic-tag/menu-color/)
 * [transparent](https://wordpress.org/support/topic-tag/transparent/)

 * 1 reply
 * 2 participants
 * Last reply from: [Evan Herman](https://wordpress.org/support/users/eherman24/)
 * Last activity: [8 years, 10 months ago](https://wordpress.org/support/topic/transparent-menu-5/#post-9242669)
 * Status: resolved