Search Results for 'mobile menu'

  • In reply to: Mobile view problem

    Mirela
    Participant

    Hello,

    1-Please add this code:

    @media (max-width: 480px){
    .owl-prev {
        left: -35px !important;
    }
    .single-product .related.products .owl-nav > div:after {
        top: 9px !important;
    }}

    Result screenshot: https://postimg.org/image/69wtqd6b9/

    2-Please go to file css/codeless-woocommerce.css and find these lines:

    @media (max-width:500px){
        .woocommerce .products ul,
        .woocommerce ul.products{
            margin:0 0px;
        }
        .woocommerce ul.products[data-columns-mobile="1"] .product_item .inner-wrapper{
            padding-left: 0 !important;
            padding-right:0 !important;
        }

    Remove te !important from padding-left: 0 !important;
    Then add this code into your Additional css menu:

    @media (max-width: 480px){
    .woocommerce ul.products[data-columns-mobile="1"] .product_item .inner-wrapper {
        padding-left: 75px !important;
    }}

    I have added these changes to our to-do list to add them in the next update!

    Best regards!

    Mirela
    Participant

    Hello,

    I edited the last css i gave you regarding this. This is the result: https://postimg.org/image/nln2hlpqd/ Is it ok like this?

    The css responsible is this:

    @media (max-width: 480px){
    #logo { left: 90% !important;}
    #logo img {
        height: 55px !important;
    }
    .header_1 header#header {background-color: rgba(34, 34, 34, 0) !important;}
    .mobile_small_menu { color: black !important;}
    }

    Change the values or colors to your wish.

    Best regards!

    Hannah83
    Participant

    thx, it worked so far, but it still lies on the logo. I played a bit with the percentage value but somehow nothings happens? The menue shouldn’t be on top of the logo.

     

    And could you please tell me where to change the background just for the mobile background where the logo is sitting on currently?

    The logo doesnt look good. https://imgur.com/a/urrZj

    I already tried to change it but didn’t work.

     

    Thanks!

     

    • This reply was modified 6 years, 11 months ago by Hannah83.
    Mirela
    Participant
    This reply has been marked as private.
    Mirela
    Participant

    Hello,

    Yes, you can achieve this with custom css too. Add this code:

    @media (max-width: 480px){
    #logo { left: 11% !important;}
    .mobile_small_menu { color: white !important;}
    }

    Change the values to your wish.

    Best regards!

    Hannah83
    Participant

    Thanks, worked.

     

    I will write down all the changes you made.

    On one more thing: How can I change the menu button on mobile view? The menu icon is grey and is sitting directly on the logo: https://ibb.co/iusotH

    Is it possible to adjust the logo to a smaller size in responsive mobile mode?

    Can I change the colour somehow?

    Mirela
    Participant

    Hello,

    Can you please check that the “Header Options > Show Responsive Menu Dropdown” option is set ON first? If it already is, than add this code into your Custom Css box:

    @media (max-width: 480px){
    .header_5 .mobile_small_menu {
        display: block;
        color: white;
    }
    ul#mobile-menu {
        background-color: grey;
    }}

    Else, set it ON, and try again.
    The Logo is present, but since the header background is white and the logo as well, it get invisible. Add this code into your Custom Css box to make the header in mobile transparent (change the background value to any color you want):

    @media (max-width: 480px){
    .header_wrapper {
        background: #ffffff00 !important;
    }
    #logo img.dark { width: 95% !important;}
    section#slider-fullwidth {min-height: 151px !important;}
    }

    Result screenshot: https://postimg.org/image/yplc7pl51/
    Let me know.

    Best regards!

    Mirela
    Participant
    This reply has been marked as private.
    Mirela
    Participant

    Hello,

    Yes, sure. Inside the @media (max-width: 1055px) rule, add this code as well:

    header#header {
        background-color: white !important;
    }

    So the result code with be:

    @media (max-width: 1055px){
    .mobile_small_menu {
        display: block !important;
    }
    #navigation {
        display: none !important;
    }
    #logo {
        float: right !important;
    }
    header#header {
        background-color: white !important;
    }
    }

    Best regards!

    Mirela
    Participant

    Hello,

    I tried adding this code via inspect element:

    @media (max-width: 1055px){
    .mobile_small_menu {
        display: block !important;
    }
    #navigation {
        display: none !important;
    }
    #logo {
        float: right !important;
    }}

    And this is the result: https://postimg.org/image/dev31vmdx/
    Can you please try again? make sure to not have any errors in previous code that could interfere with the right execution of this block.
    Let us know.

    Best regards!

    In reply to: Mobile Menu

    selman
    Participant

    I know but there must be option for change mobile menu style. If the menu is long, It will look terrible. You should add this feature for upcoming updates.

    In reply to: Mobile Menu

    Mirela
    Participant

    Hello,

    Sorry but this is theme’s mobile menu default style. To apply such change requires coding that is not included in support. I suggest you hire a developer to do the changes for you.

    Best regards!

    Mirela
    Participant

    Hello,

    Please go to General Options > Header Options > Dropdown Options & Mobile Menu, change the background color here.
    Let us know if you need further help.

    Best regards!

    selman
    Participant

    Hi,

    I use dropdown pages on desktop menu. However on mobile, the menu is very long. How to add open/close toggle for dropdown elements?

Viewing 15 results - 751 through 765 (of 1,339 total)