That worked, thanks! I had set my left menu bar to be a fixed size so thought I needed to adjust that as well, so it tried changing the fixed, ie –

/* adjust left nav */

.html_header_sidebar #top #header {
width: 280px !important;
}

.html_header_left #main {
margin-left: 280px !important;
position: relative !important;
}

To this under 768 –

/* adjust left nav */

.html_header_sidebar #top #header
{
/* width: 100% !important; */
}

.html_header_left #main
{
/* margin-left: 0px !important; */
}

But as you see I commented that out and now it’s fine – just wanted to share that bit for anyone who is also using a custom width :)

Perfect! Thank you so much, Ismael :)

Ok! Wonderful :) I tweaked it some more because the CH characters were too close to the edge, so here is my final code; hopefully this helps others! Thank you for your help!

/* before mobile menu */

.av-hamburger:before {
	content: 'MENU';
	font-size: 14px;
	padding-right: 10px;
}

/* adjust pancake to give the CH some space */

.main_menu {
	margin-right: 60px;
}

/* header widget after header */

#header .widget {
    right: 0px;
    padding-top: 0;
    position: absolute;
    top: -15px;
    z-index: 999;
	font-size: 18px;	
}

Sorry, the URL didn’t work –

Trying more options, I managed to target the MENU element, but I’d like to add a hover effect to the hamburger, plus the CH is still in the wrong place. Please advise :)

.avia-menu.av-main-nav-wrap:after {
    content: "中文";
	font-style: Arial;
    font-size: 14px !important;
    left: 2px;
	/*display: inline-block;*/
    position: absolute;
    /* top: 30px;*/
}

.av-hamburger:before {
	content: 'MENU';
	font-size: 14px;
	padding-right: 10px;
}

Hi ismael
No. It’s in Dev and hasn’t moved please try again.

Thanks, Mike. I like to try and work things out myself, ie, learn as I progress rather than having you do all the work :) I also like to share my code so that others can find quick answers. Yes, we are done for now, although I do have one other quick question –

The ‘REGISTER’ button, top right in the secondary menu is sitting above the 8px white border that is on the main wrapper for the entire page. How do I specify a z-index to have it sit under the page border, or is that the easiest way to do it? :)

Hi Mike
Yes, I’ve figured out 2 of the 3 elements! I’m including all of ym code to help others but the arrow in the masonry, at the bottom of this post isn’t quite right yet, so I need a bit of feedback for that last item that is eluding me :)

This is for the fullwidth slider, both left and right, using a div id in the captions –

/* align right */

#alignR {	
	text-align: right;
}

.caption_bottom .slideshow_caption #alignR {
	background: url("img/arrowLeft.png");
	background-repeat: no-repeat;
	background-position: top right;
	margin-right: -50px;
}

.caption_bottom .slideshow_caption .slideshow_inner_caption .slideshow_align_caption #alignR {
	text-align: right;
}

.caption_bottom .slideshow_caption h2 #alignR {
	padding: 10px 60px 0 0 !important;
}

/* align left */

#alignL {	
	text-align: left;	
}

.caption_bottom .slideshow_caption #alignL {
	background: url("img/arrowRight.png");
	background-repeat: no-repeat;
	background-position: top left;
	margin-left: -50px;
}

.caption_bottom .slideshow_caption .slideshow_inner_caption .slideshow_align_caption #alignL {
	text-align: left;
}

.caption_bottom .slideshow_caption h2 #alignL {
	padding: 10px 0 0 60px !important;
}

This is for the arrow in an image used in the 3 col grid –

.av-image-caption-overlay-center {
	background: url("img/arrowRight.png");
	background-repeat: no-repeat;
	background-position: bottom left;
	text-align: left;
	padding: 0px 20px 20px 60px;
	vertical-align: bottom !important;
}

.av-image-caption-overlay-center p {
	text-transform: uppercase;
	color: #fff;
	font-size: 22px;
	line-height: 22px;
	text-shadow: 2px 2px 4px #000;	
}

And finally this is for a specific item in the masonry grid, but this one is not quite right yet, as you can see –

/* add arrow to specific items */

#av-masonry-1-item-204 .av-masonry-entry-content.entry-content {
	background: url("img/arrowLeft.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	padding: 50px 0px 20px 0px;
	margin-right: -10px !important;
}

I need to move the text over to the left but perhaps instead of adding the arrow into the same div as the caption I should go up one element?

Thanks again :)

Not meaning to bump but I’m hoping for a reply soon, please :) I need to get this site done soon.

Hi Rikard

Yes, I understand how to set the properties; my question is what is the correct syntax to apply it to both of the following, just like I did for a fullwidth slider, as per above –

An image
A masonry gallery item

thanks!

Thanks so much! :)

Just one little tweak to make it perfect (remove the 8px left) –

.av-large-gap.av-masonry {
padding: 0 !important;
}

Yes, and the one difference is KGH is sticky and BWC is not – perhaps that is causing the issue? Regardless, shouldn’t I be able to see the whole slider even if the header is sticky?