Center Icons in header Dawn theme

Store Design
, , , , , , , , ,
1

I recently changed my icon for my dawn theme. My cart icon and my hamburger menu icon. I want them to be aligned but stay at the same place they are at if that make sense. Want them to remain across from each other but aligned in the center of my header. Only on mobile. This is my website www.takeoverapparel.com and password is takeover.

Code I used to update my cart icon in my theme.liquid

.header__icons a#cart-icon-bubble { position: relative; } .header__icons a#cart-icon-bubble svg { display: none !important; } .header__icons a#cart-icon-bubble:before { content: attr(data-cart-text); display: inline; font-size: 16px; line-height: 1; white-space: nowrap; color: #ffffff; } .header__icons a#cart-icon-bubble .cart-count-bubble { display: none !important; } .header__icons a#cart-icon-bubble { text-decoration: none; color: #ffffff; outline: none; background: transparent; box-shadow: none; border: none; } .header__icons a#cart-icon-bubble:focus, .header__icons a#cart-icon-bubble:active, .header__icons a#cart-icon-bubble:hover { outline: none; background: transparent; box-shadow: none; border: none; } .cart-drawer, .cart-popup, .drawer__cart, .drawer--cart, .drawer__content, .drawer__panel { border: none !important; border-left: none !important; box-shadow: none !important; background-color: #000000 !important; } /* Also remove border/shadow on any cart drawer inner elements */ .cart-drawer * { border: none !important; box-shadow: none !important; } /* Remove possible outline */ .cart-drawer:focus, .cart-drawer:active { outline: none !important; }

Code I used to update my hamburger icon in my icon-hamburger.svg

<?xml version="1.0" encoding="utf-8"?>
1 Like
2

Hi @takeoverapparel ,

Please use the following code in Style tag :

@media screen and (max-width: 749px)

{
.header

{
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}

.header__menu-toggle {
display: flex !important;
align-items: center !important;
height: 100%;
}

.header__icons a#cart-icon-bubble {
display: flex !important;
align-items: center !important;
height: 100%;
}

.header__icons a#cart-icon-bubble:before {
display: flex !important;
align-items: center !important;
height: 100%;
line-height: 1;
}
}

Please use this code and let me know if it works !

Thanks !

3

that worked but it made my header bigger and I don’t want that