Home Forums Weaver Xtreme Theme Float Logo from Menu bar slightly into header image

Topic Resolution: Resolved
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #69697
    ROBIN
    Participant

    This may be too complicated for me, but I thought I would see if it was something fairly simple.

    My site is https://ncconcrete.us/

    The Client wants the Logo to do the same thing as it does on this Website:  aceconcreteutah.com

    At the very least I would like to be able to have it look like it does in the example website before scroll meaning that it

    floats partially over the header image.

    Thank you in advance for any help you can provide.

    #69700
    scrambler
    Moderator

    Making it float could be done with the rule

    .menu-primary .wvrx-menu-html {position:absolute;top:0;left:0;}

    As for changing size as you scroll, this would normally require JavaScript, but we may be able to do something similar without it if you set the menu to “fix to top on scroll”, similar to what is explained in the article below.

    “Fixed to Top on Scroll” Menus: Customization – Weaver Xtreme Guide (weavertheme.com)

    Too be sure, set the menu to “Fix to top on scroll” and I can have a look

     

    #69705
    ROBIN
    Participant

    Thanks so much Scrambler,

    I have fixed the menu to the top.

    I appreciate you playing with this.  If it gets too tricky don’t spend too much time, I appreciate everything you do!

    #69707
    scrambler
    Moderator

    Add  all the rules below to the theme global custom CSS rule box

    /* Rule to float left html image over header */
    .menu-primary .wvrx-menu-html {position:absolute;top:0;left:0;}

    /* Rule to set the transition speed for max-width */
    .wvrx-menu-container .wvrx-menu-left img{transition: max-width 2s ease;}

    /* Rule to change the left html image size once the menu is fixed */
    .wvrx-menu-container.wvrx-fixonscroll .wvrx-menu-left img {max-width: 40%;}

    #69708
    ROBIN
    Participant

    If No one has told you this week that you are a genius let me be the first.  That works like a charm. THANK YOU!

    #69709
    scrambler
    Moderator

    You are welcome 🙂

    #69717
    scrambler
    Moderator

    And if you want to make the menu bar less tall after it scrolls, you can change the rules to

    /* Rule to float left html image over header */
    .menu-primary .wvrx-menu-html {position:absolute;top:0;left:0;}

    /* Rule to set the transition speed for max-width */
    .wvrx-menu-container .wvrx-menu-left img{transition: max-width 2s ease;}
    #nav-primary ul.wvrx-menu {transition:padding-top 2s ease;}

    /* Rule to change the left html image size once the menu is fixed */
    .wvrx-menu-container.wvrx-fixonscroll .wvrx-menu-left img {max-width: 40%;}
    #nav-primary .wvrx-fixonscroll ul.wvrx-menu {padding-top: 1.5em;}

     

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