The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Floating Menu

View previous topic View next topic Go down

Solved Floating Menu

Post by IdaTR on October 27th 2013, 11:23 am

Is it possible to adjust how much the menu on: http://fmdesign.forumotion.com/t91-phpbb3-vertical-navbar
Should be transparent.

The website I want it on is: http://testest2.danskforum.net
Like with the code:
Code:
  opacity:0.9;
    filter:alpha(opacity=95)
But I want the code to be connected to the menu:

Code:
/*Navbar*/
a.mainmenu{
position:relative;
top:10px;
margin:-10px 0px -10px 0px;
text-shadow:1px 1px 2px #000;
border-radius:5px;
font-weight:bold;
font-size:13px;
display:block;
color:#fff;
}
a.mainmenu:hover{
box-shadow:0px 5px 6px rgba(0,0,0, 0.550) inset;
background-color:rgba(0,0,0, 0.3);
color:#ff8
}
ul.navlinks {
text-align:left;
position:relative;
border:none;
}
.navbar {
box-shadow:5px 5px 10px rgba(0,0,0, 0.3) inset, -0.1px -5px 10px rgba(0,0,0, 0.3) inset;
-webkit-border-radius:10px 0px 0px 10px;
-moz-border-radius:10px 0px 0px 10px;
-o-border-radius:10px 0px 0px 10px;
background-color:rgba(0,0,0, 0.3);
border-radius:10px 0px 0px 10px;
position:fixed;
height:auto;
width:160px;
top:35px;
right:-140px;
transition:0.5s;}
.navbar:hover{
right:0px;
}
p.nomargin/*Header Searchbar*/{
display:none;
}
#page-footer .navbar{
box-shadow:none !important;
position:inherit !important;
display:inline !important;
}
.icon-home/*Footer Home*/{
display:none;
}

IdaTR
Forumember

Female Posts : 339
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Solved Re: Floating Menu

Post by levy on October 27th 2013, 11:33 am

Code:
#page-header .navbar ul.navlinks{
opacity:0.7;
}
You should try to use and a hover for that , because what is on the ul.navlinks will have opacity 0.7 ( menu items )

levy
Hyperactive

Male Posts : 2582
Reputation : 345
Language : Romanian, English
Location : criticize artwork, not people!

http://help.forumotion.com/

Back to top Go down

Solved Re: Floating Menu

Post by Ange Tuteur on October 27th 2013, 12:17 pm

To edit the transparent base of the navbar you'll edit this part:
Code:
.navbar {
box-shadow:5px 5px 10px rgba(0,0,0, 0.3) inset, -0.1px -5px 10px rgba(0,0,0, 0.3) inset;
-webkit-border-radius:10px 0px 0px 10px;
-moz-border-radius:10px 0px 0px 10px;
-o-border-radius:10px 0px 0px 10px;
background-color:rgba(0,0,0, 0.9);
border-radius:10px 0px 0px 10px;
position:fixed;
height:auto;
width:160px;
top:35px;
right:-140px;
transition:0.5s;}
This is our background color:
Code:
background-color:rgba(0,0,0, 0.9);
It uses RGBA, the alpha channel allows us to modify the transparency of the color.

The layout of the value field for RGBA is: (Red, Green, Blue, Opacity)

You can also add your filter properties from the first post into .navbar to act as a fallback for older browsers that do not support RGBA.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Floating Menu

Post by IdaTR on October 27th 2013, 12:27 pm

Thanks!
Was the
Code:
background-color:rgba(0,0,0, 0.9);
Just edit the last number between 1 and 0.1 in the code. Worked perfect!

IdaTR
Forumember

Female Posts : 339
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Solved Re: Floating Menu

Post by Ange Tuteur on October 27th 2013, 12:30 pm

Correct! The opacity value can range from:

1 to 0.1. If you want to be precise you can add additional digits after the decimal: 0.250

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Floating Menu

Post by SLGray on October 27th 2013, 5:50 pm

Topic Solved & Locked


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36641
Reputation : 2443
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum