CMS Development

Netherscurial
Member

Help with Vast theme

HellI I am working on site built in Hubsput using the Vast Theme, https://design-assets.hubspot.com/vast/blog

 

Site is at http://blog.ehwell.com/blog

 

I took over from editing it from anothe person who started but it looks like the mobile menu/toggle got messed up and it does not appear like it does in the original vast theme.

 

How do I get the mobile toggle back? As you see it just shows a green vertical nav and no toggle.

 

Thannks!

 

 

0 Upvotes
15 Replies 15
MFrankJohnson
Thought Leader

Help with Vast theme

_hubspot-button-accept-as-solution-gif-v00.gif

Help other HubSpot searchers find this post quickly by accepting the solution

 

Q: How do I get the mobile toggle back on the VAST blog template that I took over from another dev?

 

Short A: n/a

 

Longer A:

Hopefully, your predecessor CLONED the HubSpot VAST template. In that case you can just replace the damaged code with clean code from the original template.

 

If not, surely you can download VAST into one of your dev portals and pull clean HubSpot code from there.

 

Help answer your question? If so, remember to accept this 'solution'.

 

Best,
Frank

 


hubspot-solutions-signature-mfrankjohnson-v03.png

www.MFrankJohnson.com

 

Note: Please search for recent posts as HubSpot evolves to be the #1 CRM platform of choice world-wide.

 

Hope that helps.

 

Be well,
Frank


www.mfrankjohnson.com
0 Upvotes
Netherscurial
Member

Help with Vast theme

Thanks Frank.

 

How would I pull it into a dev portal?

0 Upvotes
MFrankJohnson
Thought Leader

Help with Vast theme

>> How would I pull it into ...

Your dev portal works just like a regular portal. You download VAST from the HubSpot Marketplace. Once you have this clean copy, you can clone to code or whatever you need to do to clean up your damaged copy in the other portal.

 

Just note, blog templates can be very tricky, so ... if you're not familiar with moving code between portals you'll want help with that.

 

The dev big guns should chime in here soon. It's quite busy on the HubSpot Community today, so ...

 

 

Note: Please search for recent posts as HubSpot evolves to be the #1 CRM platform of choice world-wide.

 

Hope that helps.

 

Be well,
Frank


www.mfrankjohnson.com
0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Help with Vast theme

@Netherscurial - You might owe us a beer if this works 😄

 

Add this JS somwhere in the page

$(document).ready(function(){$(".header-main-menu").addClass("custom-menu-primary-beta"),$(".custom-menu-primary-beta").addClass("js-enabled"),$(".custom-menu-primary-beta .hs-menu-wrapper").before('<div class="mobile-trigger cta_border_button">MENU</div>'),$(".custom-menu-primary-beta .flyouts .hs-item-has-children > a").after(' <div class="child-trigger"><i></i></div>'),$(".mobile-trigger").click(function(){return console.log("clicked"),$(this).next(".hs-menu-wrapper").slideToggle(),$("body").toggleClass("mobile-open"),$(".child-trigger").removeClass("child-open"),$(".hs-menu-children-wrapper").slideUp(250),!1}),$(".child-trigger").click(function(){return $(this).parent().siblings(".hs-item-has-children").find(".child-trigger").removeClass("child-open"),$(this).parent().siblings(".hs-item-has-children").find(".hs-menu-children-wrapper").slideUp(250),$(this).next(".hs-menu-children-wrapper").slideToggle(250),$(this).next(".hs-menu-children-wrapper").children(".hs-item-has-children").find(".hs-menu-children-wrapper").slideUp(250),$(this).next(".hs-menu-children-wrapper").children(".hs-item-has-children").find(".child-trigger").removeClass("child-open"),$(this).toggleClass("child-open"),!1});var e=$(".background-image").find("img").attr("src");$("#banner-background-image").css("background-image","url("+e+")");var i=$(".offer-image").find("img").attr("src");$("#offer-background-image").css("background-image","url("+i+")");var n=$(".back-to-top");function t(){var e=$(window).width(),i=$(".header-container-wrapper").height(),n=$(window).height()-i-$(".footer-container-wrapper").height();e>767?$(".body-container-wrapper").css("padding-top",i+"px"):$(".body-container-wrapper").css("padding-top","0px"),$(".body-container-wrapper").css("min-height",n+"px")}function a(e){var i,n=$(".vast-pillar__nav").children("div"),t=n.find(".nav-items"),a=function(){if($("body").hasClass("pillar-page")&&$(window).width()>767){var e=$(".header-container-wrapper").height()+"px";n.css({"margin-top":"-"+e,"padding-top":e})}else $("body").hasClass("pillar-page")&&n.css({"margin-top":0})},r={width:0,updateWidth:function(){r.width=0,t.children().each(function(){r.width+=$(this).outerWidth(!0)})}},s=function(){r.width>=$(window).width()?(t.hasClass("slick-initialized")||t.slick({centerPadding:"60px",variableWidth:!0,infinite:!1,centerMode:!0,slidesToShow:1,arrows:!0,focusOnSelect:!0,responsive:[{breakpoint:768,settings:{centerMode:!0,centerPadding:"40px",slidesToShow:3}},{breakpoint:480,settings:{centerMode:!0,centerPadding:"40px",slidesToShow:1}}]}),i.on("anchor_navSwitchNavSelection",function(e){var i;i=n.find(".selected").index(),t.slick("slickGoTo",i)})):t.hasClass("slick-initialized")&&t.slick("unslick")};!function(){a(),$(window).scroll(a);var n=new anchor_content(e,{nav_class:".vast-pillar__nav",section_container_class:".vast-pillar__section",section_title_class:".vast-pillar__title",selected_section_offset:100});i=$(n),r.updateWidth(),s(),$(window).on("resize",function(){s()})}()}n.hide(),$(window).scroll(function(){$(this).scrollTop()>50?n.fadeIn():n.fadeOut()}),n.find("a").click(function(e){e.preventDefault(),$("html, body").animate({scrollTop:0},500)}),$(".tab-pane").not(".active").hide(),$(".tabber-content .tab-pane").each(function(e,i){$(i).attr("id","tab-"+e)}),$(".tabber-tabs a").each(function(e,i){$(i).attr("href","#tab-"+e);var n=$(i).attr("href");$(this).click(function(e){e.preventDefault(),$(this).parent().hasClass("active")||($(this).parent().addClass("active").siblings().removeClass("active"),$(n).fadeIn().siblings().hide())})}),$(window).scroll(function(){var e=$("body");$(window).scrollTop()>$(".body-container").offset().top?e.addClass("small-header"):e.removeClass("small-header")}),t(),$(window).on("resize",t),$(document).ready(function(){1==!$.trim($(".phone-icon .contact-info").html())&&$(".contact-us .fa-phone").hide(),1==!$.trim($(".envelope-icon .contact-info").html())&&$(".contact-us .fa-phone").hide(),1==!$.trim($(".home-icon .contact-info").html())&&$(".contact-us .fa-phone").hide()}),$(".vast-pillar").each(function(){a($(this))})});

and this css

body .custom-menu-primary .hs-menu-wrapper > ul > li > a {
    padding: 10px 50px;
    color: white;
}
body .custom-menu-primary .hs-menu-wrapper > ul {
    padding-top: 0;
}
body .custom-menu-primary .hs-menu-wrapper > ul > li {
    margin-right: 0;
}
body .header-main-menu {
    margin: 0 0 0;
}
0 Upvotes
Netherscurial
Member

Help with Vast theme

I added it here

 

https://cl.ly/2O200Y1P1z3v

 

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Help with Vast theme

I'm not seeing the code in your live page, are you sure that's publishing?

0 Upvotes
Netherscurial
Member

Help with Vast theme

Hey I added it to the head and it seems to be showing up there in head but still does work. 


I added the CSS to the media query part of the CSS

 

http://blog.ehwell.com/blog

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Help with Vast theme

Hmmm, something changed with the HTML structure. Can you delete the old js code I gave you, and replace it with this code instead?

$(document).ready(function() {
    $('.hs_cos_wrapper_type_simple_menu ').addClass('custom-menu-primary');
    $(".custom-menu-primary").addClass("js-enabled");
    $(".custom-menu-primary .hs-menu-wrapper").before('<div class="mobile-trigger cta_border_button">MENU</div>');
    $(".custom-menu-primary .flyouts .hs-item-has-children > a").after(' <div class="child-trigger"><i></i></div>');
    $(".mobile-trigger").click(function() {
        console.log('clicked');
        $(this).next(".hs-menu-wrapper").slideToggle();
        $("body").toggleClass("mobile-open");
        $(".child-trigger").removeClass("child-open");
        $(".hs-menu-children-wrapper").slideUp(250);
        return false
    });
    $(".child-trigger").click(function() {
        $(this).parent().siblings(".hs-item-has-children").find(".child-trigger").removeClass("child-open");
        $(this).parent().siblings(".hs-item-has-children").find(".hs-menu-children-wrapper").slideUp(250);
        $(this).next(".hs-menu-children-wrapper").slideToggle(250);
        $(this).next(".hs-menu-children-wrapper").children(".hs-item-has-children").find(".hs-menu-children-wrapper").slideUp(250);
        $(this).next(".hs-menu-children-wrapper").children(".hs-item-has-children").find(".child-trigger").removeClass("child-open");
        $(this).toggleClass("child-open");
        return false
    });
    var e = $(".background-image").find("img").attr("src");
    $("#banner-background-image").css("background-image", "url(" + e + ")");
    var b = $(".offer-image").find("img").attr("src");
    $("#offer-background-image").css("background-image", "url(" + b + ")");
    var a = $(".back-to-top");
    a.hide();
    $(window).scroll(function() {
        if ($(this).scrollTop() > 50) {
            a.fadeIn()
        } else {
            a.fadeOut()
        }
    });
    a.find("a").click(function(f) {
        f.preventDefault();
        $("html, body").animate({
            scrollTop: 0
        }, 500)
    });
    $(".tab-pane").not(".active").hide();
    $(".tabber-content .tab-pane").each(function(f, g) {
        $(g).attr("id", "tab-" + f)
    });
    $(".tabber-tabs a").each(function(g, h) {
        $(h).attr("href", "#tab-" + g);
        var f = $(h).attr("href");
        $(this).click(function(i) {
            i.preventDefault();
            if (!$(this).parent().hasClass("active")) {
                $(this).parent().addClass("active").siblings().removeClass("active");
                $(f).fadeIn().siblings().hide()
            }
        })
    });
    $(window).scroll(function() {
        var h = $("body");
        var g = $(window).scrollTop();
        var f = $(".body-container").offset();
        if (g > f.top) {
            h.addClass("small-header")
        } else {
            h.removeClass("small-header")
        }
    });

    function c() {
        var h = $(window).width();
        var f = $(".header-container-wrapper").height();
        var g = $(window).height() - f - $(".footer-container-wrapper").height();
        if (h > 767) {
            $(".body-container-wrapper").css("padding-top", f + "px")
        } else {
            $(".body-container-wrapper").css("padding-top", "0px")
        }
        $(".body-container-wrapper").css("min-height", g + "px")
    }
    c();
    $(window).on("resize", c);
    $(document).ready(function() {
        if (!$.trim($(".phone-icon .contact-info").html()) == true) {
            $(".contact-us .fa-phone").hide()
        }
        if (!$.trim($(".envelope-icon .contact-info").html()) == true) {
            $(".contact-us .fa-phone").hide()
        }
        if (!$.trim($(".home-icon .contact-info").html()) == true) {
            $(".contact-us .fa-phone").hide()
        }
    });

    function d(q) {
        var o = $(".vast-pillar__nav"),
            f = o.children("div"),
            j = f.find(".nav-items"),
            p, g;
        var i = function() {
            return $(window).width()
        };
        var k = function() {
                if ($("body").hasClass("pillar-page") && $(window).width() > 767) {
                    var s = $(".header-container-wrapper").height() + "px";
                    f.css({
                        "margin-top": "-" + s,
                        "padding-top": s
                    })
                } else {
                    if ($("body").hasClass("pillar-page")) {
                        f.css({
                            "margin-top": 0
                        })
                    }
                }
            },
            p = {
                width: 0,
                updateWidth: function() {
                    p.width = 0;
                    var s = j.children();
                    s.each(function() {
                        p.width += $(this).outerWidth(true)
                    })
                }
            },
            n = function() {
                if (!j.hasClass("slick-initialized")) {
                    j.slick({
                        centerPadding: "60px",
                        variableWidth: true,
                        infinite: false,
                        centerMode: true,
                        slidesToShow: 1,
                        arrows: true,
                        focusOnSelect: true,
                        responsive: [{
                            breakpoint: 768,
                            settings: {
                                centerMode: true,
                                centerPadding: "40px",
                                slidesToShow: 3
                            }
                        }, {
                            breakpoint: 480,
                            settings: {
                                centerMode: true,
                                centerPadding: "40px",
                                slidesToShow: 1
                            }
                        }]
                    })
                }
            },
            m = function() {
                if (j.hasClass("slick-initialized")) {
                    j.slick("unslick")
                }
            },
            l = function(t) {
                var s = f.find(".selected").index();
                j.slick("slickGoTo", s)
            },
            h = function() {
                if (p.width >= i()) {
                    n();
                    g.on("anchor_navSwitchNavSelection", function(s) {
                        l(s)
                    })
                } else {
                    m()
                }
            },
            r = (function() {
                k();
                $(window).scroll(k);
                var s = new anchor_content(q, {
                    nav_class: ".vast-pillar__nav",
                    section_container_class: ".vast-pillar__section",
                    section_title_class: ".vast-pillar__title",
                    selected_section_offset: 100
                });
                g = $(s);
                p.updateWidth();
                h();
                $(window).on("resize", function() {
                    h()
                })
            })()
    }
    $(".vast-pillar").each(function() {
        var f = d($(this))
    })
});
0 Upvotes
Netherscurial
Member

Help with Vast theme

THanks that seems to have worked but it changed the style of the desktop menu view.; but guess I can re-style that?

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Help with Vast theme

Well, that's why I gave you that CSS code, to try and fix that issue. Were you able to get that CSS in there?

0 Upvotes
Netherscurial
Member

Help with Vast theme

Thanks it works now.

 

I had the CSS in the mobile media query, moved it outside into desktop view one

 

Thanks so much.

 

Is there easy way to make the toggle those 3 hamburger lines?

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Help with Vast theme

you could try this new js, instead of what I gave you before

$(document).ready(function() {
    $('.hs_cos_wrapper_type_simple_menu ').addClass('custom-menu-primary');
    $(".custom-menu-primary").addClass("js-enabled");
    $(".custom-menu-primary .hs-menu-wrapper").before('<div class="mobile-trigger cta_border_button">  <div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>');
    $(".custom-menu-primary .flyouts .hs-item-has-children > a").after(' <div class="child-trigger"><i></i></div>');
    $(".mobile-trigger").click(function() {
        console.log('clicked');
        $(this).next(".hs-menu-wrapper").slideToggle();
        $("body").toggleClass("mobile-open");
        $(".child-trigger").removeClass("child-open");
        $(".hs-menu-children-wrapper").slideUp(250);
        return false
    });
    $(".child-trigger").click(function() {
        $(this).parent().siblings(".hs-item-has-children").find(".child-trigger").removeClass("child-open");
        $(this).parent().siblings(".hs-item-has-children").find(".hs-menu-children-wrapper").slideUp(250);
        $(this).next(".hs-menu-children-wrapper").slideToggle(250);
        $(this).next(".hs-menu-children-wrapper").children(".hs-item-has-children").find(".hs-menu-children-wrapper").slideUp(250);
        $(this).next(".hs-menu-children-wrapper").children(".hs-item-has-children").find(".child-trigger").removeClass("child-open");
        $(this).toggleClass("child-open");
        return false
    });
    var e = $(".background-image").find("img").attr("src");
    $("#banner-background-image").css("background-image", "url(" + e + ")");
    var b = $(".offer-image").find("img").attr("src");
    $("#offer-background-image").css("background-image", "url(" + b + ")");
    var a = $(".back-to-top");
    a.hide();
    $(window).scroll(function() {
        if ($(this).scrollTop() > 50) {
            a.fadeIn()
        } else {
            a.fadeOut()
        }
    });
    a.find("a").click(function(f) {
        f.preventDefault();
        $("html, body").animate({
            scrollTop: 0
        }, 500)
    });
    $(".tab-pane").not(".active").hide();
    $(".tabber-content .tab-pane").each(function(f, g) {
        $(g).attr("id", "tab-" + f)
    });
    $(".tabber-tabs a").each(function(g, h) {
        $(h).attr("href", "#tab-" + g);
        var f = $(h).attr("href");
        $(this).click(function(i) {
            i.preventDefault();
            if (!$(this).parent().hasClass("active")) {
                $(this).parent().addClass("active").siblings().removeClass("active");
                $(f).fadeIn().siblings().hide()
            }
        })
    });
    $(window).scroll(function() {
        var h = $("body");
        var g = $(window).scrollTop();
        var f = $(".body-container").offset();
        if (g > f.top) {
            h.addClass("small-header")
        } else {
            h.removeClass("small-header")
        }
    });

    function c() {
        var h = $(window).width();
        var f = $(".header-container-wrapper").height();
        var g = $(window).height() - f - $(".footer-container-wrapper").height();
        if (h > 767) {
            $(".body-container-wrapper").css("padding-top", f + "px")
        } else {
            $(".body-container-wrapper").css("padding-top", "0px")
        }
        $(".body-container-wrapper").css("min-height", g + "px")
    }
    c();
    $(window).on("resize", c);
    $(document).ready(function() {
        if (!$.trim($(".phone-icon .contact-info").html()) == true) {
            $(".contact-us .fa-phone").hide()
        }
        if (!$.trim($(".envelope-icon .contact-info").html()) == true) {
            $(".contact-us .fa-phone").hide()
        }
        if (!$.trim($(".home-icon .contact-info").html()) == true) {
            $(".contact-us .fa-phone").hide()
        }
    });

    function d(q) {
        var o = $(".vast-pillar__nav"),
            f = o.children("div"),
            j = f.find(".nav-items"),
            p, g;
        var i = function() {
            return $(window).width()
        };
        var k = function() {
                if ($("body").hasClass("pillar-page") && $(window).width() > 767) {
                    var s = $(".header-container-wrapper").height() + "px";
                    f.css({
                        "margin-top": "-" + s,
                        "padding-top": s
                    })
                } else {
                    if ($("body").hasClass("pillar-page")) {
                        f.css({
                            "margin-top": 0
                        })
                    }
                }
            },
            p = {
                width: 0,
                updateWidth: function() {
                    p.width = 0;
                    var s = j.children();
                    s.each(function() {
                        p.width += $(this).outerWidth(true)
                    })
                }
            },
            n = function() {
                if (!j.hasClass("slick-initialized")) {
                    j.slick({
                        centerPadding: "60px",
                        variableWidth: true,
                        infinite: false,
                        centerMode: true,
                        slidesToShow: 1,
                        arrows: true,
                        focusOnSelect: true,
                        responsive: [{
                            breakpoint: 768,
                            settings: {
                                centerMode: true,
                                centerPadding: "40px",
                                slidesToShow: 3
                            }
                        }, {
                            breakpoint: 480,
                            settings: {
                                centerMode: true,
                                centerPadding: "40px",
                                slidesToShow: 1
                            }
                        }]
                    })
                }
            },
            m = function() {
                if (j.hasClass("slick-initialized")) {
                    j.slick("unslick")
                }
            },
            l = function(t) {
                var s = f.find(".selected").index();
                j.slick("slickGoTo", s)
            },
            h = function() {
                if (p.width >= i()) {
                    n();
                    g.on("anchor_navSwitchNavSelection", function(s) {
                        l(s)
                    })
                } else {
                    m()
                }
            },
            r = (function() {
                k();
                $(window).scroll(k);
                var s = new anchor_content(q, {
                    nav_class: ".vast-pillar__nav",
                    section_container_class: ".vast-pillar__section",
                    section_title_class: ".vast-pillar__title",
                    selected_section_offset: 100
                });
                g = $(s);
                p.updateWidth();
                h();
                $(window).on("resize", function() {
                    h()
                })
            })()
    }
    $(".vast-pillar").each(function() {
        var f = d($(this))
    })
});

and append this css to your css file

.bar1, .bar2, .bar3 {
    width: 30px;
    height: 2px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}
0 Upvotes
Netherscurial
Member

Help with Vast theme

AH cool I will try that. 

 

One last questions....you know why a horizontal 1 pixel line is going through the logo? I don't see any border in the CSS for that element

tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Help with Vast theme

I see that, try adding this CSS

body .header-container .hs_cos_wrapper_type_logo a {
    display: block;
}
0 Upvotes
Netherscurial
Member

Help with Vast theme

Do I need to add that JS within <script> tags? I added it before ending body tag but it does not seem to show up in the Source