Hello,

1-The hamburger menu is there but the color of the bars is white and that is why you do not see it. I changed that to black with custom css. i Added this code:

.cl-mobile-menu-button.cl-color-light span {
    background-color: #303133 !important;
}

2-Where is the word “Commercial” located? Can you post a screenshot of it?
3-I added this code to fix all responsive issues:

@media (max-width: 480px){
	.cl-mobile-menu-button.cl-color-light span {
    background-color: #303133 !important;
}
	.cl_socialicon.cl-element.round {
    margin-left: -1px !important;
}
	.header_container > .main .header-el:last-child {
    margin-left: -36px !important;
}
}

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

Best regards!

Hello,

The menu is there in mobile but the font is black and that is why you do not see the menu items. Please add this code into your Additional Css:

@media (max-width: 480px){
.header_container.menu-full-style #navigation nav a {
    color: white !important;
}
}

-Can you please be more clear on the desktop menu issue? I don’t understand well what is wrong..

Best regards!

Hello,

The mobile menu was not showing because the option to make it show in first place, was off. I set it on again. The option is General Options > Header Options > Show Responsive Menu Dropdown.

-Can you please try to deactivate the third party plugins and try again? There is something else triggering the content to go up after the first action (tap/scroll) in the page. clear cache and try again with all third party plugins deactivated.
Let us know how it goes.

Best regards!

Hello,

This is not theme issue. I have already explained the situation in this other topic of yours:
https://support.codeless.co/?topic=mobile-website-not-correct
The header width is fixed. If the logo is too wide and you keep on adding menu items to menu, it will come a moment when the menu width will exceed the available space in header and will scroll down.
Gain more space by reducing padding between menu items. I added this css into your Custom Css box to reduce the logo size:

#logo {
    width: 35% !important;
}

This screenshot explains better the situation: https://postimg.org/image/kkv8rb3g5/
Let us know if you need further help.

Best regards!

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!