Home Forums Weaver Xtreme Theme Menu shrink when fixed to top on scroll

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #62276

    Hi Guys,

    Hoping to have the menu as it is, then when scrolling down it sticks to top and shrinks in size.

    I found this in the guide which works to make it bigger, but I can’t get it to go smaller with a – minus
    Is there also a way to shrink the logo when the menu shrinks (if possible). I’m using the logo in the menu left html section.

    Many thanks!

    .wvrx-menu-container.wvrx-fixonscroll {


    Please provide a link to the site, and clarify what you mean by Shrink, do you mean reduce the height?


    Hi Scrambler,

    I’m just playing about and would like to use the effect if possible so no link right now. I keep the weaver menu except use the html are left to add the logo.
    By shrink I mean reduce the height yes, like this website https://www.connections2energy.co.uk


    To be sure of the CSS, we really need to inspect the page with the logo in place.

    Without it, we can only guess. You can try the rule below in the theme Global Custom CSS Rule box

    .wvrx-fixonscroll .wvrx-menu-left img {height:50px;}

    Private Reply
    This reply has been marked as private.

    *Side note, sorry don’t see an edit post option.
    I’ve added this to Current Page BG ({border-bottom:2px solid #e19924;}) is there anyway to raise this by a pixel or two? If you hover over other pages in the menu you’ll see it’s off by that much


    I am confused.

    on the website https://www.connections2energy.co.uk/ The menu is fixed at the top and has a fixed size even when you scroll.

    On your site  https://yoursub.druminternet.uk/

    The menu uses Fixed on top and NOT fixed to top on scroll, so there is no way to do any changes when we scroll apart from writing Javascript.

    Once you switched the menu to fixed on scroll, try adding the CSS below to the theme Global Custom CSS Rule Box

    .wvrx-fixonscroll .wvrx-menu-left img {height:60px;width:auto;}
    .menu-primary .wvrx-fixonscroll.wvrx-menu-container {padding-top:2em;}
    .wvrx-fixonscroll .site-logo {margin-top:-35px;}



    Spot on, thank you Scrambler!

    Just one more thing, please, do you know how to resolve this being slightly off by a pixel- https://i.imgur.com/OgTbWH9.png

    I have this in the current page BG: {border-bottom:2px solid #e19924;}
    And below which is a class put into the menu so the line appears when you hover

    .hvr-underline-from-center {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
    .hvr-underline-from-center:before {
    content: “”;
    position: absolute;
    z-index: -1;
    left: 51%;
    right: 51%;
    bottom: 0;
    background: #e19924;
    height: 2px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;


    The orange underline is not done the same way, the current page is done with a border bottom and the animated hover with a before element area background color
    As a result, your hover element is 2px higher than the border-bottom

    the rules below should fix that by shifting the hover area 2px down
    .hvr-underline-from-center {overflow:visible !important;}
    .hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {bottom:-2px;}


    Perfect, thank you!

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