Changing Menu Background Color and Opacity

Hello,

I use Elementor + Generatepress theme. I watched a video about making a menu bar with Elementor and it was recommending to copy menu part from the Style.css of twenty eleven theme and paste into Additional CSS. Not to conflict with the active theme’s CSS elements, he was also recommending the element to something else. So, below is the additional CSS code for my menu at http://www.meedad.com.tr/farmaden

.site-header {
display: none;
}

.site-footer {
display: none;
}

@media (max-width: 768px) {
.site-header {
display: none;
}
}

@media (max-width: 768px) {
.site-footer {
display: none;
}
}

.orjinmenu {
background: #222; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#252525, #0a0a0a);
background: -o-linear-gradient(#252525, #0a0a0a);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
background: -webkit-linear-gradient(#252525, #0a0a0a);
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
width: 100%;
}
.orjinmenu ul {
font-size: 17px;
font-weight: bold;
list-style: none;
margin: 0 0 0 0.5125em;
padding-left: 0;
}
.orjinmenu li {
float: left;
position: relative;
}
.orjinmenu a {
color: #eee;
display: block;
line-height: 2.888em;
padding: 0 1.2125em;
text-decoration: none;
}
.orjinmenu ul ul {
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
margin: 0;
position: absolute;
top: 2.888em;
left: 0;
width: 188px;
z-index: 99999;
}
.orjinmenu ul ul ul {
left: 100%;
top: 0;
}
.orjinmenu ul ul a {
background: #f9f9f9;
border-bottom: 1px dotted #ddd;
color: #444;
font-size: 17px;
font-weight: bold;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
width: 268px;
}
.orjinmenu li:hover > a,
.orjinmenu ul ul :hover > a,
.orjinmenu a:focus {
background: #efefef;
}
.orjinmenu li:hover > a,
.orjinmenu a:focus {
background: #f9f9f9; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -o-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
color: #373737;
}
.orjinmenu ul li:hover > ul {
display: block;
}
.orjinmenu .current-menu-item > a,
.orjinmenu .current-menu-ancestor > a,
.orjinmenu .current_page_item > a,
.orjinmenu .current_page_ancestor > a {
font-weight: bold;
}

[Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

So could you please help me how to;

1. change the background color of the menu bar ?
2. change the background color of the menu bar when it floats or sticks to the screen ?
3. change the opacity of the background color of the menu bar when it floats ?

Thanking you in advance.

• This topic was modified 7 years, 1 month ago by bdbrown.