Title: floating navigation over header
Last modified: August 19, 2016

---

# floating navigation over header

 *  Resolved [wildbug](https://wordpress.org/support/users/wildbug/)
 * (@wildbug)
 * [16 years ago](https://wordpress.org/support/topic/floating-navigation-over-header/)
 * I am using the Multi-Level Navigation plugin and am wondering if it’s possible
   to make the background of it transparent so it can be moved up on the header 
   without covering up the logo on the left side. The plugin author does not provide
   this type of support. Any suggestions appreciated. Thank you!
 * [reshelter.org](http://reshelter.org)

Viewing 8 replies - 1 through 8 (of 8 total)

 *  Thread Starter [wildbug](https://wordpress.org/support/users/wildbug/)
 * (@wildbug)
 * [16 years ago](https://wordpress.org/support/topic/floating-navigation-over-header/#post-1482467)
 * Here is the navigation menu CSS code, if it helps:
 *     ```
       #suckerfishnav {
           background:transparent;
           font-size:20px;
           font-family:copperplate,verdana,sans-serif;
           font-weight:bold;
           width:100%;
           padding: 0px 5px 0px 0px;
           }
       #suckerfishnav, #suckerfishnav ul {
           float:right;
           list-style:none;
           line-height:20px;
           padding-right:16px;
           margin-top:157px;
           width:100%;
           }
       #suckerfishnav a {
           display:block;
           color:#30040b;
           text-decoration:none;
           padding:0px 10px;
           }
       #suckerfishnav li {
           float:right;
           padding:0;
           }
       #suckerfishnav li a {
       	background: #FFFFFF url(http://reshelter.org/wp-content/themes/quickrise/assets/images/navbar.png);
       	color: #30040b;
       	display: block;
       	font-family: copperplate, Verdana, Arial, Tahoma;
       	font-size: 18px;
       	font-weight: bold;
              margin: 0px 5px 0px 0px;
       	padding: 8px 15px 8px 15px;
       	text-decoration: none;
       	-moz-border-radius-topleft: 20px;
       	-moz-border-radius-topright: 20px;
       	-khtml-border-radius: 20px;
       	-webkit-border-top-left-radius: 20px;
       	-webkit-border-top-right-radius: 20px;
       	-webkit-border-bottom-left-radius: 0px;
       	-webkit-border-bottom-right-radius: 0px;
       	}
       #suckerfishnav li a:hover {
       	background: #FFFFFF url(http://reshelter.org/wp-content/themes/quickrise/assets/images/navhover.gif);
       	color: #ff003a;
               font-weight: bold;
       	-moz-border-radius-topleft: 20px;
       	-moz-border-radius-topright: 20px;
       	-khtml-border-radius: 20px;
       	-webkit-border-top-left-radius: 20px;
       	-webkit-border-top-right-radius: 20px;
       	-webkit-border-bottom-left-radius: 0px;
       	-webkit-border-bottom-right-radius: 0px;
       	}
       #suckerfishnav ul {
           position:absolute;
           left:-999em;
           height:auto;
           width:151px;
           font-weight:normal;
           margin:0;
           line-height:1;
           border:0;
           border-top:1px solid #666666;
           z-index: 150;
        }
       #suckerfishnav li li {
           width:149px;
           border-bottom:1px solid #666666;
           border-left:1px solid #666666;
           border-right:1px solid #666666;
           font-weight:bold;
           font-family:verdana,sans-serif;
           }
       #suckerfishnav li li a, #nav li li a:link {
       	background: #FFFFFF;
       	width: 130px;
       	color: #30040b;
       	float: none;
       	font-size: 12px;
       	margin: 0px 0px 0px -1px;
       	padding: 5px 10px 5px 10px;
       	border-bottom: 1px solid #00527B;
       	border-left: 1px solid #00527B;
       	border-right: 1px solid #00527B;
       	-moz-border-radius-topleft: 0px;
       	-moz-border-radius-topright: 0px;
       	-khtml-border-radius: 0px;
       	-webkit-border-top-left-radius: 0px;
       	-webkit-border-top-right-radius: 0px;
       	-webkit-border-bottom-left-radius: 0px;
       	-webkit-border-bottom-right-radius: 0px;
       	}
       #suckerfishnav li li a:hover, #nav li li a:active {
       	background: #e5ddcf;
       	color: #FFFFFF;
       	padding: 5px 10px 5px 10px;
       	-moz-border-radius-topleft: 0px;
       	-moz-border-radius-topright: 0px;
       	-khtml-border-radius: 0px;
       	-webkit-border-top-left-radius: 0px;
       	-webkit-border-top-right-radius: 0px;
       	-webkit-border-bottom-left-radius: 0px;
       	-webkit-border-bottom-right-radius: 0px;
       	}
       #suckerfishnav .current_page_item a {
       	background: #FFFFFF url(http://reshelter.org/wp-content/themes/quickrise/assets/images/navhover.gif);
       	color: #ff003a;
               font-weight: bold;
       	-moz-border-radius-topleft: 20px;
       	-moz-border-radius-topright: 20px;
       	-khtml-border-radius: 20px;
       	-webkit-border-top-left-radius: 20px;
       	-webkit-border-top-right-radius: 20px;
       	-webkit-border-bottom-left-radius: 0px;
       	-webkit-border-bottom-right-radius: 0px;
       	}
       #suckerfishnav li ul ul {
           margin:-21px 0 0 150px;
           }
       #suckerfishnav li li:hover {
           background:#e5ddcf;
           }
       #suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
           color:#ff003a;
           }
       #suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
           color:#ff003a;
           }
       #suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
           color:#ff003a;
           }
       #suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
           left:-999em;
           }
       #suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
           left:auto;
           background:#FFFFFF;
           }
       #suckerfishnav li:hover, #suckerfishnav li.sfhover {
           background:#FFFFFF;
           }
       ```
   
 * I tried playing with z-index and background transparency to no avail. Appreciate
   any help!!
 *  [Riversatile](https://wordpress.org/support/users/riversatile/)
 * (@riversatile)
 * [16 years ago](https://wordpress.org/support/topic/floating-navigation-over-header/#post-1482468)
 * could you send the URL of your site ?
    It could help
 *  [Riversatile](https://wordpress.org/support/users/riversatile/)
 * (@riversatile)
 * [16 years ago](https://wordpress.org/support/topic/floating-navigation-over-header/#post-1482469)
 * Ho… sorry, URL’s in your 1st message
 *  [Riversatile](https://wordpress.org/support/users/riversatile/)
 * (@riversatile)
 * [16 years ago](https://wordpress.org/support/topic/floating-navigation-over-header/#post-1482471)
 * You talk about this plug-in in DEMO here ???
    [http://pixopoint.com/?mln=on](http://pixopoint.com/?mln=on)
 *  Thread Starter [wildbug](https://wordpress.org/support/users/wildbug/)
 * (@wildbug)
 * [16 years ago](https://wordpress.org/support/topic/floating-navigation-over-header/#post-1482473)
 * Yes, that’s it. I just want to move the menu up 20px but the logo on the left
   with the tree image overlaps it will a white background.
 *  [Riversatile](https://wordpress.org/support/users/riversatile/)
 * (@riversatile)
 * [16 years ago](https://wordpress.org/support/topic/floating-navigation-over-header/#post-1482622)
 * OK…Very easy !!!
    I used Firefox with “Firebug” to find the CSS solution !
 * **See below :**
 * **1)** Separate the 2 CSS IDs “#suckerfishnav” and “#suckerfishnav ul” contained
   here :
 *     ```
       #suckerfishnav, #suckerfishnav ul {
           float:right;
           list-style:none;
           line-height:20px;
           padding-right:16px;
           margin-top:157px;
           width:100%;
           }
       ```
   
 * **Like that :**
 *     ```
       #suckerfishnav {
           float:right;
           list-style:none;
           line-height:20px;
           padding-right:16px;
           margin-top:157px;
           width:100%;
           }
       #suckerfishnav ul {
           float:right;
           list-style:none;
           line-height:20px;
           padding-right:16px;
           margin-top:157px;
           width:100%;
           }
       ```
   
 * **2)** Change some parameters in the CSS of the ID “#suckerfishnav” like that:
 *     ```
       #suckerfishnav {
           float:right;
           list-style:none;
           line-height:20px;
           padding-right:16px;
           margin-top:137px;
           width:100%;
           z-index:100;
           position:relative;
           }
       ```
   
 * – I have change **margin-top:137px;** by **margin-top:157px;** because you want
   the menu up 20px 😉
 * – **z-index** attribute allows to place the DIV (layer) above the other DIV, 
   so your menu appear in first instead of appear below your logo !
 * – **position:relative;** is mandatory when you use a **z-index** attribute
 * Finally, it works !!!
 * Cheers
 *  [Riversatile](https://wordpress.org/support/users/riversatile/)
 * (@riversatile)
 * [16 years ago](https://wordpress.org/support/topic/floating-navigation-over-header/#post-1482623)
 * See the result here :
    [http://www.monsterup.com/upload/1272703051640.png](http://www.monsterup.com/upload/1272703051640.png)
 *  Thread Starter [wildbug](https://wordpress.org/support/users/wildbug/)
 * (@wildbug)
 * [16 years ago](https://wordpress.org/support/topic/floating-navigation-over-header/#post-1482668)
 * THANK YOU SOOOO MUCH!! You are the best, that totally worked. I REALLY appreciate
   the time you took to help me out!!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘floating navigation over header’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 8 replies
 * 2 participants
 * Last reply from: [wildbug](https://wordpress.org/support/users/wildbug/)
 * Last activity: [16 years ago](https://wordpress.org/support/topic/floating-navigation-over-header/#post-1482668)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics