I added the code and custom.css is shown below. The problem is still there:

/* Have fun adding your style here :) – PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

/* General Custom CSS */

.social_header #header_main .container, .social_header .main_menu ul:first-child > li a {
height: 60px;
line-height: 60px;
}
span.avia-menu-fx {
bottom: 0px !important;
}

/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */

@media only screen and (min-width: 768px) {
/* Add your Desktop Styles here */

}

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */

}

span.avia-menu-fx {
bottom: 30px !important;
}

I do not see that code in custom.css. Here is the contents of custom.css:

/* Have fun adding your style here :) – PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

/* General Custom CSS */

.social_header #header_main .container, .social_header .main_menu ul:first-child > li a {
height: 60px;
line-height: 60px;
}

/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */

@media only screen and (min-width: 768px) {
/* Add your Desktop Styles here */

}

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */

}

span.avia-menu-fx {
bottom: 30px !important;
}

I just tried another laptop with firefox and chrome, and still have the same issue !!

that is very strange….going to look at another laptop

I finally got the changes to show up by disabling CDN and the cache plugin. I put this code in custom.css and the white space is gone. But, the red line showing the menu selection is now on top of the navigation text. How do I move the line down so it sits on top of the thin gray line below the navigation menu text?

.social_header #header_main .container, .social_header .main_menu ul:first-child > li a {
height: 60px;
line-height: 60px;
}

http://www.forte-systems.com

Thanks for all the help!!!

Hi Yigit
I changed the footer.php in child-theme version – and all was well.
Thanks for your help.
Bruno

Hi Yigit,
Thanks for helping me.
Here the screenshot link: http://acquisto.pro/img/website_sample.jpg.
I want a mutliply image background, one image topleft (person) and one background image thats repeats…

Cheers,
Marcel

Thanks, Yigit – that’s added the logo into mobile.

However if I remove “.fixed_header #main {padding-top: 0;}” the menu is no longer transparent on desktop sizes.

The intention is to always have a fixed header (does not resize to the small logo version) transparent over a full height website.

Hi Yigit,

I got it to work, had to change the CSS rules in shortcodes.css
Changed these lines
/* hide controlls on desktop */
.avia_desktop .av_slideshow.avia-slideshow .avia-slideshow-controls a{ opacity: 0; filter:alpha(opacity=0); }
.avia_desktop .av_slideshow.avia-slideshow:hover .avia-slideshow-controls a{ opacity: 0.6; filter:alpha(opacity=60); }
.avia_desktop .av_slideshow.avia-slideshow:hover .avia-slideshow-controls a:hover{ opacity: 0.8; filter:alpha(opacity=80); }

To:
/* hide controlls on desktop */
.av_slideshow.avia-slideshow .avia-slideshow-controls a, .avia-slideshow-controls a{ opacity: 0; filter:alpha(opacity=0); }
.av_slideshow.avia-slideshow:hover .avia-slideshow-controls a{ opacity: 0.6; filter:alpha(opacity=60); }
.av_slideshow.avia-slideshow:hover .avia-slideshow-controls a:hover, .avia-slideshow-controls a:hover{ opacity: 0.8; filter:alpha(opacity=80);}

Solved it…kinda

If the box-shadow color is not specified in the sonar effect than it will inherit the color of it’s element. read about it here
So, if I go into the shortcodes.css and delete all of the colors from @keyframes sonarEffect the sonar color will inherit the color of the icon!

/*sonar effect*/
@-webkit-keyframes sonarEffect {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px , 0 0 10px 10px , 0 0 0 10px ;}
	100% {box-shadow: 0 0 0 2px , 0 0 10px 10px , 0 0 0 10px ;-webkit-transform: scale(1.5);opacity: 0;}
}
@-moz-keyframes sonarEffect {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px , 0 0 10px 10px , 0 0 0 10px ;}
	100% {box-shadow: 0 0 0 2px , 0 0 10px 10px , 0 0 0 10px ;-moz-transform: scale(1.5);opacity: 0;}
}
@keyframes sonarEffect {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px , 0 0 10px 10px , 0 0 0 10px ;}
	100% {box-shadow: 0 0 0 2px , 0 0 10px 10px , 0 0 0 10px ;transform: scale(1.5);opacity: 0;}
}

The problem is that I went into the parent theme folder to make this change. So, any updates will wipe it out.

I read here that even if I copy ‘shortcodes.css’ into a child theme folder that the child theme may not use it, relying on the parent themes CSS instead.

Any tips?

Hi Josue.
I’ve made the slider full width now to remove the background issues, and the ‘bumping’ issues I’ll live with.
I also noticed in Mozilla that when hovering over the the linked images on the home page, the text beneath it bumps down noticeably. Does this have something to do with the overlay? Is there anyway to stop this?

Thank you for your help!