Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • December 10, 2014 at 6:01 pm #366130
    McEwans

    Hi i have disabled the stick header on this specific page http://backup.mcewan.co.za/rich_grill/home/#av-layout-grid-1

    But when i scroll down the menu bar still highlights and the logo still resizes. How do i disable that on this specific page?

    i used the following code in functions.php

    function add_custom_script(){
    if(is_page(440)){
    ?>
    <script>
    jQuery(window).load(function(){
    jQuery(‘html’).removeClass(‘html_header_sticky’);
    });
    </script>
    <?php
    }
    }
    add_action(‘wp_footer’, ‘add_custom_script’);

    December 10, 2014 at 11:30 pm #366317
    Elliott

    Hi McEwans!

    Try switching the code to this.

    function add_custom_script(){
if(is_page(440)){
?>
<script>
jQuery(window).load(function(){
jQuery(‘html’).removeClass(‘html_header_sticky’);
});
</script>
<style type = "text/css">
.logo img { max-height: 180px !important; }
</style>
<?php
}
}
add_action(‘wp_footer’, ‘add_custom_script’);

    Best regards,
    Elliott

    December 11, 2014 at 9:04 am #366547
    McEwans

    Thanks Elliot that worked perfectly! Are you the new member of the team??

    One more question, if i wanted to disable the background image on the logo container on the other pages of the site, what would be the best route to achieve that?

    December 11, 2014 at 9:12 am #366550
    McEwans
    This reply has been marked as private.
    December 11, 2014 at 9:15 am #366551
    McEwans

    Sorry one more thing, the menu items move as well when i scroll down, how do i set those in place as well?

    December 11, 2014 at 8:31 pm #366866
    Andy

    Hey!

    I will flag Elliott for the menu bar and moving items.

    To disable background image use this in Quick CSS:

    .html_header_top.html_logo_center .page-id-440 .logo {
background-image: none; 
}

    Adjust the page-id if necessary.

    Regards,
    Andy

    December 11, 2014 at 8:33 pm #366868
    Elliott

    Hi!

    That’s going to be more difficult because it’s being changed with javascript. Try this out.

    function add_custom_script(){
if(is_page(440)){
?>
<script>
jQuery(window).load(function(){
jQuery(‘html’).removeClass(‘html_header_sticky’);
jQuery('#header').removeClass('av_header_shrinking');
});
</script>
<style type = "text/css">
.logo img { max-height: 180px !important; }
#header_main .container {
    height: 180px !important;
    line-height: 180px !important;
}
</style>
<?php
}
}
add_action(‘wp_footer’, ‘add_custom_script’);

    Not really sure if that’s going to work for you though.

    Best regards,
    Elliott

    December 12, 2014 at 8:59 am #367151
    McEwans

    Hi Elliot thanks for you help, but unfortunately that didn’t deactivate the menu bar on scroll.

    December 12, 2014 at 9:53 pm #367513
    Elliott

    Hi!

    I don’t see an easy way of doing that. You would have to edit the theme javascript inside /enfold/js/avia.js and then do a lot of various checks so it only happens on that page and it would take a lot of time and code.

    Instead I recommend just disabling the header for that page and then insert your logo image and links inside the caption description of the slide.

    It accepts HTML so you could do something like this.

    <img src = "URL to your logo" />
<ul>
<li><a href = "#">Menu</a></li>
<li><a href = "#">Contact</a></li>
<li><a href = "#">etc</a></li>
</ul>

    You would still need to do some CSS styling on the links though.

    Best regards,
    Elliott

    • This reply was modified 10 years ago by Elliott.
    December 15, 2014 at 9:09 am #368194
    McEwans

    Thanks Elliot that is a useful bit of information. I will try it out.

    December 15, 2014 at 9:23 am #368205
    McEwans

    Does that also mean that i must set the caption to stay on the screen?

    December 15, 2014 at 9:28 am #368206
    McEwans
    This reply has been marked as private.
    December 15, 2014 at 7:10 pm #368466
    Elliott

    Hey!

    Add this to your custom CSS.

    .avia-caption-content a, .avia-caption-content li, .avia-caption-content ul {
    opacity: 1 !important;
    visibility: visible !important;
}

    And you can use this CSS to get started on styling them.

    .avia-caption-content li {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
}

    Regards,
    Elliott

    December 17, 2014 at 9:39 am #369366
    McEwans

    Thanks Elliot, if this works it will help a lot with future layouts! Will let you know soon

    December 17, 2014 at 6:06 pm #369618
    Yigit

    Hi!

    Please try and let us know so we can mark the thread as resolved or assist you further

    Cheers!
    Yigit

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.