Hello,

1-Yes, the code was to move the logo around and edit it’s height in order for it to not be above the hamburger menu anymore. If you want to move the menu too, then the hamburger menu css class must be added as well.
This is the basic css:

@media (max-width: 480px){
#logo img {
    max-height: 38px;
    margin-left: 37px;
}
.mobile_small_menu {
    margin-top: -27px !important;
    margin-left: -20px !important;
}
}

Add css attributes and change the values to your wish, until you have the layout you want.

2-I edited the previous code to this:

@media (max-width: 480px){
#logo img {
    max-height: 30px;
    margin-left: 15px;
}
.codeless_slider .swiper-slide .content.vertical_centered {
    margin-left: 0px !important;
}
.codeless_slider_swiper {
    height: 480px !important;
    min-height: 480px !important;
}
.boxed_layout .codeless_slider{
    height: 480px !important;
    min-height: 480px !important;
}
}

This is the result screenshot: https://postimg.org/image/qs21e2pcl/
I move the screen around, it did not resize anymore.

3-The menu has shifted down because the width of header allocated the menu, is not sufficient to keep it. Mostly because the logo is too wide and leaves little space for menu.
You can edit this by reducing the padding between menu items in General Options > Header Options > Menu Options > Menu Items padding.

Let us know.

Best regards!

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!

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!

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!

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!

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!

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!