Custom CSS code in responsive menu

Hi,
As you told me, after buying your theme I would like to incorporate this change into the responsive view. You can see an example of what I want in https://www.honestbeauty.com/products/makeup-palette. I attach 2 captures what I want.
Thanks.

Attachments:

You must be logged in to view attached files.

This is the prepurchase question:
Does this theme have the possibility to show the burguer menu on the left and the logo centered on the mobile version? You can see an example of what I want in https://www.honestbeauty.com/products/makeup-palette (responsive version).
Thanks.

Hello,

Thank you so much purchasing our theme and contacting our support center.

Try to add the following code snippet to the Custom CSS area in Theme Settings.

@media (max-width: 991px) {

body .main-header .widgetarea-head {
	display: table-cell;
	font-size: 0;
}
	
body .main-header .site-logo {
	width: 20%;
}
	
body .wrapp-header {
		position: relative;
	}
	
body .right-column .mobile-nav-icon {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
	
body .main-header .mobile-nav-icon {
	margin-left: 0;
}
	
body .sticky-header .container {
	height: 60px;
}
	
body .sticky-header .site-logo {
	position: absolute;
	width: 20%;
	left: 50%;
	transform: translateX(-50%);
}
}

Kind Regards
XTemos Studio

Great, the code works fine. One thing I see is that the logo changes to the left when the sticky header appears in the desktop version. Could you keep the logo in the center by passing the menu to the left? attached image.

Attachments:

You must be logged in to view attached files.

Try to add this code

body .sticky-header .main-nav {
    text-align: left;
}

body .sticky-header .site-logo {
    position: absolute;
    width: auto;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

Regards

Great thats works!
I´ve modify a little css to increase the sticky logo size when scroll down in 320px. Can you check its ok? Thanks

.cat-design-center div.hover-mask > h3 {
font-size: 15px;
color: white;
cursor: default;
}

.single-product-content .product-tabs-wrapper {
background-color: #ffffff;
border-bottom: 1px solid #e8e8e8;
}

body .sticky-header .main-nav {
text-align: left;
}

body .sticky-header .site-logo {
position: absolute;
width: auto;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}

@media (max-width: 991px) {

.right-column .search-button {
display: none;
}

body .main-header .widgetarea-head {
display: table-cell;
font-size: 0;
}

body .main-header .site-logo {
width: 20%;
}

body .wrapp-header {
position: relative;
}

body .right-column .mobile-nav-icon {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}

body .main-header .mobile-nav-icon {
margin-left: 0;
}

body .sticky-header .container {
height: 60px;
}

body .sticky-header .site-logo {
position: relative;
width: 15%;
left: 50%;
transform: translateX(-50%);
}
.main-header:not(.header-menu-top) .site-logo img {
max-width: 100px;
}
}
@media (max-width: 320px) {
body .sticky-header .site-logo {
position: relative;
width: 25%;
left: 50%;
}

}

Yes, it looks correct.

[Author]

Posts