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

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

    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 {
    padding-top:10px;padding-bottom:10px;
    }

    #62277
    scrambler
    Moderator

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

    #62289
    MikeDrum
    Participant

    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

    #62292
    scrambler
    Moderator

    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;}

    #64926
    Private Reply
    MikeDrum
    Participant
    This reply has been marked as private.
    #64928
    MikeDrum
    Participant

    *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

    #64930
    scrambler
    Moderator

    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;}

     

    #64933
    MikeDrum
    Participant

    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;
    }

    #64943
    scrambler
    Moderator

    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;}

    #64951
    MikeDrum
    Participant

    Perfect, thank you!

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