Home / Forums / ePix Support / Editing the Menu Scrollbar

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts

  • Uras
    Participant

    Hello,

    I would like to make the scroll bar of the main menu transparent. Which file and line I should edit in order to do it?

    Another question is the my scrollbar also not working properly. I need to give the username and password of my site so that you can take a look. Which email I should send?

    Regards,


    Tom ( Support)
    Keymaster

    Hi,

    To do this you will need to edit the skin. Go to Appearance > Customize > Menu Sidebar Opacity.

    What exactly are you having issues with, with the sidebar scroll? Which browser are you using and are you using the latest version of both DynamiX and WordPress? If you are still having issues, please set your reply to private and provide your URL/login details so I can take a further look for you.

    Tom


    Uras
    Participant

    Hello Tom,

    I talk about the scroll bar on the right edge of the sidebar. Unfortunately the opacity change is only applied to sidebar, not to the scrollbar. How can I edit the scrollbar?

    Thank you.


    Tom ( Support)
    Keymaster

    Hi,

    We have no control over the scroll bar, it depends which browser you are using. For example, on the Mac, the scroll bar shows up transparent but on IE the scroll bar looks ugly.

    We can try to force it with CSS though, try adding the following CSS to Appearance > Theme Options > Customize > Custom CSS.

    body,
    .header-inner {
    scrollbar-base-color: #333;
    scrollbar-base-color: #333;
    scrollbar-3dlight-color: #333;
    scrollbar-highlight-color: #333;
    scrollbar-track-color: #555;
    scrollbar-arrow-color: black;
    scrollbar-shadow-color: #333;
    scrollbar-dark-shadow-color: #333;
    }
    
    ::-webkit-scrollbar { width: 3px; height: 3px;}
    ::-webkit-scrollbar-button { background-color: #666; }
    ::-webkit-scrollbar-track { background-color: #999;}
    ::-webkit-scrollbar-track-piece { background-color: #ffffff;}
    ::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
    ::-webkit-scrollbar-corner { background-color: #999;}}
    ::-webkit-resizer { background-color: #666;}
    
    @-moz-document url-prefix(http://),url-prefix(https://) {
    scrollbar {
    -moz-appearance: none !important;
    background: rgb(0,255,0) !important;
    }
    thumb,scrollbarbutton {
    -moz-appearance: none !important;
    background-color: rgb(0,0,255) !important;
    }
    
    thumb:hover,scrollbarbutton:hover {
    -moz-appearance: none !important;
    background-color: rgb(255,0,0) !important;
    }
    
    scrollbarbutton {
    display: none !important;
    }
    
    scrollbar[orient="vertical"] {
    min-width: 15px !important;
    }
    
    @-moz-document url-prefix(http://),url-prefix(https://) {
    scrollbar {
    -moz-appearance: none !important;
    background: rgb(0,255,0) !important;
    }
    thumb,scrollbarbutton {
    -moz-appearance: none !important;
    background-color: rgb(0,0,255) !important;
    }
    
    thumb:hover,scrollbarbutton:hover {
    -moz-appearance: none !important;
    background-color: rgb(255,0,0) !important;
    }
    
    scrollbarbutton {
    display: none !important;
    }
    
    scrollbar[orient="vertical"] {
    min-width: 15px !important;
    }
    
    }
    }
    
    

    This is about the max we can do for this. Even this was a special customization another customer had requested in the customization forum.

    Kind regards,
    Tom


    Uras
    Participant
    This reply has been marked as private.

    Tom ( Support)
    Keymaster

    Hi Uras,

    What have you added to the CSS and what have you changed? Your site is not behaving like the normal theme. It seems like you have changed something for this to happen.

    Your code does also not seem to be in the Custom CSS field under Appearance > Theme Options > Customize > Custom CSS.

    Kind regards,
    Tom


    Uras
    Participant

    Hello,

    I have added the code you’ve given me on Appearance > Theme Options > Customize > Custom CSS. now however the scrollbar is still broken. It doesn’t go all the way down. Can you please help?

    Thank you


    Tom ( Support)
    Keymaster

    Hi Uras,

    We have had another look at this and added the following CSS to fix the scroll issue.

    div.header-inner {padding-bottom:100px;}
    

    I recommend changing the lifestyle and advertisement menu item to something shorter as it is making the menu scroll from left to right.

    Hope this helps.

    Tom


    Uras
    Participant

    Amazing service. All fixed now. Thank you.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.