Forum Replies Created

Viewing 30 posts - 1 through 30 (of 278 total)
  • Author
    Posts
  • in reply to: left menu not displaying properly on mobile #841773

    No, all done, thanks again! I always look carefully before asking and so I think it’s important to share to help others using your excellent theme :)

    in reply to: left menu not displaying properly on mobile #841377

    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 :)

    in reply to: left menu not displaying properly on mobile #841093

    To be clear, on mobile I want the logo centered and the hamburger centered underneath. Thanks again!

    in reply to: Add menu text before mobile menu and linked text after #824358

    Perfect! Thank you so much, Ismael :)

    in reply to: Add menu text before mobile menu and linked text after #824264

    Oh, one more item, please – how can I change the colour of the hamburger on hover?

    in reply to: Add menu text before mobile menu and linked text after #823479

    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;	
    }
    in reply to: Add menu text before mobile menu and linked text after #822315

    Hello, Ismael
    As noted previously, the site is password protected. The password is in my first private field, but I am adding here, again, in the private field :)

    in reply to: Add menu text before mobile menu and linked text after #822229
    in reply to: Add menu text before mobile menu and linked text after #822228

    Still working on this myself.

    I looked at this post –

    (Purchase code hidden if logged out) -the-header/”>

    It’s placed a widget before, not after the hamburger, and doesn’t seem to read the HTML, so is showing everything. I’ve added this to my css –

    /* wdiget after header */
    
    #header .widget {
      right: 0%;
      padding-top: 0;
      position: absolute;
      top: 0;
      z-index: 999;
    }
    in reply to: Add menu text before mobile menu and linked text after #822168

    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;
    }
    in reply to: Add menu text before mobile menu and linked text after #822161

    Didn’t work; looks like that is before the mobile menu element.

    div.avia-menu.av-main-nav-wrap:before {
    	content: 'MENU |';
    	font-size: 13px;	
    }
    
    div.avia-menu.av-main-nav-wrap:after {
        content: "中文";
    	font-style: Arial;
        font-size: 14px !important;
        left: 2px;
        position: absolute;
        top: 30px;	
    }
    in reply to: Add menu text before mobile menu and linked text after #821549

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

    Worked perfectly! Thanks so much :)

    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? :)

    Sorry, I kept working on it so changed some elements, and I think I have it now unless you think there is a better way to do this? It’s the 3rd image in the masonry grid, the one with ‘EMPIRE’

    /* add arrow to specific items */
    
    # (Purchase code hidden if logged out)  .av-masonry-entry-content.entry-content {
    	background: url("img/arrowLeft.png");
    	background-repeat: no-repeat;
    	background-position: center right;
    	padding: 50px 50px 45px 0px;
    	margin-right: -21px !important;
    }

    Then style the text using this element –

    /* titles over images */
    
    .av-masonry-entry-content.entry-content {
        font-family: 'AndesLight';
        font-weight: normal;	
    	text-transform: uppercase;
    	font-size: 22px;
    	/* line-height: 32px; */
    	letter-spacing: 2px;
    	text-shadow: 2px 2px 4px #000;
        color: #fff !important;
        opacity: 1 !important;
    	text-align: right;		
    }

    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 –

    . (Purchase code hidden if logged out)  {
    	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;
    }
    
    . (Purchase code hidden if logged out)  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 */
    
    # (Purchase code hidden if logged out)  .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 :)

    Yes, that is better. I’m still not able to move the h2 over; here is my code –

    .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 .slideshow_inner_caption .slideshow_align_caption #alignR .slideshow_caption h2 {
    	padding: 10px 100px 0 0 !important;
    }
    

    I need the aligned right text to be moved over to the left 100px so it’s not jammed up against the arrow and edge of the screen, and can’t seem to target just that element.

    Once I have this done I still need to know which elements need to be targetted for the masonry and images, please :)

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

    Actually, now that I am pondering this some more, on some sliders I want the text to be aligned right, and aligned left in others so I’d like to know how to pinpoint adding in the arrow to sit within a div associated with the caption text itself.

    So, something like this, using the existing fullwidth slider example at the top of the page –

    In my css – you’ll see that this works but I will need to also set the arrow to be lower left, facing right for the left aligned text

    .caption_bottom .slideshow_caption {
    	background: url("img/arrowLeft.png") no-repeat bottom right;		
    }

    So if I add in a div here in my fullwidth slider –

    Caption Title
    Enter a caption title for the slide here
    <div id=”alignR”>INTELLIGENT LIVING PROUDLY<br>PRESENTED BY INTERGULF</div>

    #alignR {	
    	text-align: right;
    	background: url("img/arrowLeft.png") no-repeat bottom right;		
    }

    You’ll see that the arrow is sitting top right, not lower left, and getting cut off. Is there possible a better way to handle this, please?

    Also, what I need is how to apply the same thing to an image and a masonry grid item :)

    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!

    in reply to: Change masonry grid gap size #816050

    I do have another question that is sort of related, but it’s a bit different so I’ll start a new thread :)

    in reply to: Change masonry grid gap size #816022

    Thanks so much! :)

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

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

    in reply to: Change masonry grid gap size #815590

    Sorry I forgot it is password protected.

    This took me ages so I’m happy to help everyone out!!!! :)

    Oops –

    Here’s a great artcile about it –

    Oh, sorry, but I have it figured out!
    Digging very deeply there’s some browser specific code that makes it work! This took ages to find so hopefully this helps someone else.

    .main_color input::-moz-placeholder { /* firefox newer */
    	color: #ec1b24 !important;
    }
    
    .main_color input::-webkit-placeholder { /* Chrome/Opera/Safari */
    	color: #ec1b24 !important;
    }
    
    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    	color: #ec1b24 !important;
    }
    	
    ::-moz-placeholder { /* Firefox 19+ */
    	color: #ec1b24 !important;
    }
    	
    :-ms-input-placeholder { /* IE 10+ */
    	color: #ec1b24 !important;
    }
    	
    :-moz-placeholder { /* Firefox 18- */
    	color: #ec1b24 !important;
    }

    Hi there
    I used similar code, below, but for some reason the fields that are required do not change to #666. This links to a PHP file and an external DB and I even tried to create an inline class called requiredFields to style in the PHP but nothing seems to make a change. Any ideas?

    #top .main_color .input-text,
    #top .main_color input[type='text'],
    #top .main_color input[type='input'],
    #top .main_color textarea,
    #top .main_color select {
        border-color: #666 !important; 
        background-color: #fff !important;
        color: #666 !important;
    }

    I’m sorry, a colleague change the header to non sticky so now they are the same. I guess basically what I need to do is if i want a sticky header then the easiest thing would be to add in a whitespace above the slider so it doesn’t get placed underneath. Unless there is a better option at least that will work :)

    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?

Viewing 30 posts - 1 through 30 (of 278 total)