Transparent menu

Question

I tried to make the research online but couldn't find anything. I am trying to change my menu to make it go behind my background image like on this website: https://www.paypal.com/ca/webapps/mpp/merchant

How can I change my css to apply it to my menu?

.holder{
width:960px;
margin:0 auto;
overflow:hidden;
position:relative;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
#nav{
background:#fefefe;
padding:15px;
}

#nav .clearfix.mobile{
display: none;
}

#nav .nav-toggle{
/* margin:10px; */
display:none;
float:right;
}

#nav #nav-topmenu{
margin-top:5px;
}

#nav #nav-topmenu ul li{
list-style:none;
display:inline-block;
vertical-align:middle;
background:url(../img/bg-nav.png) no-repeat 0 4px;
padding: 0 19px;
line-height: 17px;
margin:0;
}
#nav #nav-topmenu ul li:first-child{background:none;}
#nav #nav-topmenu ul li a{
font-size:14px;
font-weight: normal;
line-height:14px;
}

#nav #nav-topmenu-mobile ul li{
list-style:none;
padding:10px 20px;
margin:0;
border-bottom: 1px solid #ccc;
}
#nav #nav-topmenu-mobile ul li:first-child{background:none;}
#nav #nav-topmenu-mobile ul li a{
font-size:50px;
font-weight: normal;
line-height:50px;
/* color:#fff; */
}

#nav #nav-topmenu-mobile ul li select{
-webkit-appearance: menulist-button;
height: 50px;
width: 210px;
font-size: 30px;
}

#nav .popover{
min-width: 300px;
left:75% !important;
top:55px !important;
}

#nav .popover .arrow{
left:260px !important;
}

<div class="hidden-xs" id="nav-topmenu">
            <select name='langs' class="lang-selector -form-control pull-right">
                <option value="1" <?php if(LANG_ID == 1) echo "selected='selected'" ?> data-lang="en">
                    English
                </option>

                <option value="2" <?php if(LANG_ID == 2) echo "selected='selected'" ?> data-lang="fr">
                    Français
                </option>

                <option value="3" <?php if(LANG_ID == 3) echo "selected='selected'" ?> data-lang="es">
                    Espa&ntilde;ol
                </option>
            </select>
            <ul>
                <?php
                if(!Members_Factory::getRowByAuth() || Members_Factory::getRowByAuth()->is()):
                ?>
                    <li>
                        <a href="<?php echo $this->url(array(), "job")?>"><?php echo __("flexible")?></a>
                    </li>
                <?php
                endif;
                ?>
                <?php
                if(!Members_Factory::getRowByAuth() || Members_Factory::getRowByAuth()->isCompany()):?>
                    <li>
                        <a href="<?php echo $this->url(array(), "find")?>"><?php echo __("Find")?></a>
                    </li>
                <?php
                endif;
                ?>
                <li>
                    <!-- <a href="https://www.example.com/blog/"><?php echo __("Blog")?></a> -->
                    <a href="<?php echo $this->url(array("section" => "companies"), "how-it-works")?>" title="<?php echo __("How it works")?>"><?php echo __("How it works")?></a>
                </li>
                <li>
                    <a href="<?php echo $this->url(array(), "pricing")?>" title="<?php echo __("Pricing")?>"><?php echo __("Pricing")?></a>
                </li>
            </ul>
        </div>

Answer 1

Inside of your stylesheet you need to create a class or id for various pieces of the menu.

So the box the menu itself is holding in you would set an opacity attribute to your class or id.

Then you could use an id for the actual menu items and override their opacity with the !important call at the end of the attribute.