Home Forums Weaver Xtreme Theme Hide small logo on menu untill scroll

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #67607
    dosolutions
    Participant

    In an effort to have a large logo show until the user scrolls the page, is there  way to show the small logo, visible only after the user scrolls the page, and not visible when the page is at or near the top?  You already have a sticky menu…

    Something like;

    .custom-logo-on-menu {

    visibility: hidden;

    }

    .custom-logo-on-menu > onscroll {

    visibility: visable;

    }

    thanks!

    <hr />

    WordPress 5.7 running Weaver Xtreme 4.4.5 | Options Version: 78 | Subtheme: Blank-V-76 | PHP Memory Limit: Local – 256M / Server – 256M

    site under development at 108.163.193.186

     

    #67609
    scrambler
    Moderator

    If you want the logo to become small when the menu is fixed on scroll, the easiest way is to use CSS to shrink it once the menu is fixed.

    Below is an article that describes the way to do it.

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

    If you want more specific help, we need a link to your site, so we can be sure of the exact CSS to give you.

    #67619
    Private Reply
    dosolutions
    Participant
    This reply has been marked as private.
    #67620
    scrambler
    Moderator

    If I go to 108.163.193.186 I get an invalid message

    The CSS is valid but may need tweaking depending on your exact settings, and I need easy access to the site to know what exactly.

    You also need to clarify if you want to change the size of the site logo or hide it, as these are two different and exclusive things.

    You also need to clarify how was the logo inserted, using the Site identity custom logo on menu bar option, or one of the menu HTML area, or something else.

    #67623
    scrambler
    Moderator

    I got notified of a new post but nothing is there. Usually this is the forum blocking post because of links.

    If this is indeed happening, post with the link written in the form of SiteurlDOTcom

    #67625
    dosolutions
    Participant

    Answer not making sense…

    #67626
    scrambler
    Moderator

    Did you try to post after my post #67620

    If not ignore my last post.

    If you did and your post is not showing up, it may be because of a link you included in the post

    #67627
    Private Reply
    dosolutions
    Participant
    This reply has been marked as private.
    #67628
    Private Reply
    dosolutions
    Participant
    This reply has been marked as private.
    #67629
    scrambler
    Moderator

    You can adjust the position of the menu when fixed on desktop with the rule below added to the theme Global Custom CSS Rule box

    .is-desktop .wvrx-fixonscroll ul.sm {margin-left:-80px;}

     

    #67630
    dosolutions
    Participant

    that is not working

    If i add

    .menu-primary .wvrx-menu-container, .menu-primary .site-title-on-menu, .menu-primary .site-title-on-menu a {
    margin-left: -90px; }

    To the developer tools I can align the menu so it is not changing horizontal position. But saving that into the custom CSS is not working.

    Any thoughts?

     

     

     

    #67631
    scrambler
    Moderator

    Try adding !important to the rule, and if it does not work, leave the rule in place and post back so I can see why it is not working

    .is-desktop .wvrx-fixonscroll ul.sm {margin-left:-80px !important;}

    #67637
    dosolutions
    Participant

    Line added, the menu still moves to the right at scroll line 4 when it sticks.

    Thanks for looking at this.

    -Daniel

    #67638
    dosolutions
    Participant

    Also in responsive mode, the hide / show menu logo works perfectly, but only above 600, and the hamburger menu is not sticking below 600px as well. where would I fix that?

    Final question, perhaps for a different thread, in responsive mode, below 768, can I show the page title at the top in the “header area – just to the right of the logo, there is lots of empty space there.

     

    thanks again!!

    #67639
    scrambler
    Moderator

    Lots of problems, here, you need to be more cautious with CSS.

    First your custom CSS file is broken as you have an incomplete rule with a non closed curly bracket (in yellow below).

    /* Change size of custom logo when fixed */
    #nav-primary .wvrx-fixonscroll .custom-logo-link {
    .header img {max-width:50%;
    margin-right: -4em;
    }

    Next, you added the rule twice and one is inside an @media rule which is not good, because it already includes the class .is-desktop that makes it only apply on desktop.

    You also forgot the space before !important.

    SO:

    • Fix the CSS incomplete rule,
    • Remove the rule in the @media rule.
    • If you use !important (which is probably not needed), don’t forget the space.
    • I suggest you select all your custom CSS and run it through the online validation below

    W3C CSS Validator results for TextArea (CSS level 3 + SVG)

    #67640
    scrambler
    Moderator

    For the other question, we will have to revisit once the CSS file is fixed. FOr me the hamburger menu fixes on scroll at any resolution.

    If you wanted the site title to show up on mobile (below 768) you could add a Site title shortcode in the Menu Right HTML box, and set that are to be hidden on desktop with its hide option

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