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!
-
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(https://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(https://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(https://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!!
could you send the URL of your site ?
It could helpHo… sorry, URL’s in your 1st message
You talk about this plug-in in DEMO here ???
https://pixopoint.com/?mln=onYes, 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.
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
See the result here :
https://www.monsterup.com/upload/1272703051640.pngTHANK YOU SOOOO MUCH!! You are the best, that totally worked. I REALLY appreciate the time you took to help me out!!
- The topic ‘floating navigation over header’ is closed to new replies.