But I also want the category pages to take the same layout.

I read in https://kriesi.at/support/topic/how-to-make-blog-category-and-tag-list-pages-styled-same-as-blog-landing-page/ that the category pages will not take the ALB layout.

• This reply was modified 9 years, 6 months ago by sdeceulaer.

Hi Vinay,

I am sorry, my explanation was not clear enough. I mean Consultancy in the dropdownmenu of Services. The hover color in the Services dropdownmenu is not oke yet; as you can see at the home page When someone hovers over Consultancy i want it totally to be the color #272727;
Furthermore i would like to change the width of the dropdowmenu; i quess the right wide is about 120px;
I now added the following code tot het Quick CSS section under Enfold > General Styling (but this code doesn’t give the result i like)

#top #wrap_all .avia_mega_div {
background-color: #272727;
border-color: #272727;
}

#top #header .mega_menu_title a {
margin-left: 0% !important;
width: 70%;
color: #FFFFFF;
text-decoration: none;
}

ul .submenu {
width: 120px !important;
}

======================

Best Regards
Paul

Thanks Andy,

For instance, on this page: http://www.arbejdsmarkedsanalyser.dk/ I would like the text (which is H2) in the top picture “PRAKSISNÆR DOKUMENTATION OG EVALUERING” to be on a coloured background, so that it is easier to read. Will I accomplish that by changing the background colour of H2?

BR,
Kim

This code solved my issue:

add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
	?>
	<script type="text/javascript">
	(function($) {

		$('.av-section-color-overlay-wrap').on('click', '.custom-mute', function() {
				$(this).toggleClass("icon-sound-on");
				
				
			});
		

		function a() {
			$('.av-section-color-overlay-wrap').prepend('<div class="custom-mute"></div>');
			$('.av-section-color-overlay-wrap').on('click', '.custom-mute', function() {
				$('#top .mejs-controls .mejs-volume-button button').trigger('click');

			});
		}

		a();
	})(jQuery);
	</script>
	<?php
}

And here’s what I added on the quickCSS:

.custom-mute {
    display: block;
    background-image: url('../../../wp-content/uploads/2016/09/icon-unmute.png');
    background-size: 48px;
    width: 48px;
    height: 48px;
    position: absolute;
    bottom: 50px;
    right: 10px;
    z-index: 1000;
}

.custom-mute:hover{
opacity: 0.5;
}

.icon-sound-on{
background-image: url('../../../wp-content/uploads/2016/09/icon-mute.png');
}

@media only screen and (max-width: 1290px) {
.custom-mute {
    
    right: 190px;
    
}
}

You guys are awesome!
You can mark this as solved. Thanks

Thank you! It works: combining both solutions, the logo is in line with the menu and there is no overlap.

However, is it possible to put the logo on top of the menu for the case when I don´t want to show the mobile menu yet and there is an overlap.

For example for your site kriesi.at: a solution for the overlap at screen widths between 862px to 767px.
What would be the css code (for the Enfold Theme)? Or is it not that simple?

I’ve got the buttons looking ok now. I made the columns they are have no spacing between them. I’ll copy and paste my original post at the top of this thread to a new ticket then Andy.

Thank you for the quick reply.
Well, the problem is that the site is still under development and the menu structure (and so the width) is not completely determined

But the same problem happens with your site:
kriesi.at

From width 862px to 767px there is an overlap

(in my case for the moment from 980px to 767 px)

I would like for this situation the menu aligned left and the logo on top of it (also aligned left)

Thanks for the help!

hm i did that in child-theme functions.php :

this is a fix for top setting only
if you only want to change it for a specific site (see code at bottom) – in my case it is page-id-140

add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script type="text/javascript">
(function($) {
    $(document).ready(function(){
        $(window).load(function() {
            var shift = $('.container.av-logo-container').outerHeight();
                $('.page-id-140 .avia-section.avia-bg-style-fixed').css('background-position-y', shift  );
        });
        $(document).scroll(function(){
            var shift = $('.container.av-logo-container').outerHeight();
                $('.page-id-140 .avia-section.avia-bg-style-fixed').css('background-position-y', shift  );
        });
    });
})(jQuery);
</script>
<?php
}

• This reply was modified 9 years, 6 months ago by Guenni007.