ismailkimyacioglu

Thank you so much Leo. It worked very well with the CSS.

One more question out of the subject, please. Can we put an animated gif with mouse hover into header logo section ? It is like the flip box in elementor.

Thank you.

Hello @awanrmb

Oopps, I should have forgotten to check the forum name as I had been forwarded by Google.

Thank you any way and wish you have a nice day.

Thank you so much for the reply. Interestingly, I have checked many plugins and none of them offer such a feature. Maybe in the future.

Hello awanrmb,

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 https://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;
}

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.

Hello awanrmb,

I use Elementor+Generatepress theme and watched a video about making a menu bar at Youtube. In that video, it was recommended to download twenty eleven and import “menu part” from its style.css file. After renaming some parts not to conflict the theme’s css, you have to add this little piece of code to Additional CSS.

Below is the copy of my CSS code in the Additional CSS section;

.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;
}

I renamed as .orjinmenu. I think it was something like #main-nav.

So, could you please help me how to

1. Change the color of the bar ?
2. Change the color when the menu bar sticks to the screen ?
3. How can we change opacity of the menu bar when sticks or floats on the site ?

Thanking you in advance.

• This reply was modified 8 years ago by ismailkimyacioglu.

Sorry, in the previous post, I forgot to provide the website address.

https://www.meedad.com.tr/farmaden

In the meantime, I have fixed the problem for line height.

Thanks for your support for the background color in advance.