Center Header Widgets in Mobile

Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

@media only screen and (max-width: 480px) {
#header .widget {
    transform: none!important;  
}}

Best regards,
Vinay

Hi,

Please review your site now.  It took us a lot of time but we are happy to help you :)

We add the below css in Quick css

/* Responsive Header */

.main_menu {
transform:translateX(-280px);
}
#header .avia-button-left {
position: absolute;
top: 54px;
right: 150px;
}
#text-14.widget{
width:100%;
max-width:1310px;
}

.seal {
position:relative;
float:right;
right:0px;
top:-10px;
}
.phone-number {
position:absolute;
z-index:999999!important;
top:68px;
right:610px;
}
@media only screen and (max-width: 1180px) {
nav.main_menu {display:none !important;}
#advanced_menu_toggle, #advanced_menu_hide {display:block !important; }
.seal {
right:90px;
}
#header .avia-button-left {
right: 240px;
}
.phone-number {
right:380px;
}}

@media only screen and (max-width: 930px) {
.responsive .logo img {
height: 80px!important;
margin-top:30px;
}
}

@media only screen and (max-width: 768px) {
#header .avia-button-left {
right: auto!important;
left:200px;
}
.phone-number {
left:0px;
right:auto;
}
.seal {
right:auto!important;
left: 190px;
float: left;
}
}

@media only screen and (max-width: 480px) {
.responsive .logo img,
#header .avia-button-left ,
.seal {
position:relative!important;
right:auto!important;
left:50%;
transform:translateX(-50%);
}
.phone-number {
position:absolute!important;
top: 160px;
right:auto;
left: 50%;
transform: translateX(-50%);
}
#header .avia-button-left { top:0}
}

And the below css was conflicting with the responsive nature so we removed the below from styles.css

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

#header .widget {
transform: none!important;
}
}
#header .widget {
padding-top: 0;
position: absolute;
left:80%;
top: 23px;
z-index: 999;
}
@media only screen and (max-width: 749px) {
#header .widget {
position: relative;
padding-bottom: 0;
top: 0px;
left: 80%;
}
}
@media only screen and (min-width: 750px) and (max-width: 1099px) {
#header .widget {
position: relative;
padding-bottom: 0;
top: 0px;
left: 80%;
}
}

/* == HIDE MENU ITEMS ON DESKTOP/MOBILE == */

@media only screen and (max-width: 1099px) {
.hide-on-mobile { display: none !important; }
}
@media only screen and (min-width: 1099px) {
.hide-on-desktop { display: none !important;
}}

/*0000000000*/

/* == CHANGE FONT & COLOR IN MAGAZINE ELEMENT must stay in quick css == */
.av-magazine .av-magazine-content-wrap .av-magazine-title {
font-size: 22px;
color: #305a91;
}
.av-magazine-title:hover {
color: #80a7d8 !important;
}

/* == MAKE GREEN BOXES WHOLE IN MOBILE must stay in quick css == */
@media only screen and (max-width: 767px) {
.responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
margin-bottom: 0px;
}
}

/* Fix footer for mobile */
@media only screen and (max-width: 670px) {
.footer_color {
background-size: cover;
}
#footer #text-11 {
top: -50px;
}}
@media only screen and (max-width: 670px) {
#footer #text-10 {
top: 30px;
}}

/* == Fix spacing in icon list for small icons == */
.av-iconlist-small li {
margin-bottom: 5px;
}

/* mobile menu extend to larger screens */

/*
@media only screen and (max-width: 1099px) {
nav.main_menu {display:none !important;}
#advanced_menu_toggle, #advanced_menu_hide {display:block !important; }
}

@media only screen and (max-width: 749px) {
#header .avia-button-left {
transform: none!important;
}
}
@media only screen and (max-width: 749px) {
#header .#text-12 {
transform: none!important;
}
} */

@media only screen and (max-width: 749px) {
#header_meta {
margin-top: -30px;
}
.logo img {
margin: auto!important;
}
.logo {
width: 100%!important;
}
#widget_sp_image-2 img{
transform:translate(50%, 20px);
}
}
@media only screen and (min-width: 750px) and (max-width: 1099px) {
#header_meta {
margin-top: -30px;
}
.logo img {
margin: auto!important;
}
.logo {
width: 100%!important;
}
#widget_sp_image-2 img {
transform:translate(50%, 20px);
}
}

/* Mobile Menu Up Minimum Screen Size */
@media only screen and (max-width: 1199px) {
nav.main_menu {
display:none !important;
}
#advanced_menu_toggle, #advanced_menu_hide {
display:block !important;
}
}

/* Mobile Menu Positioning */
#advanced_menu_toggle {
right: -25px;
top: 30px;
}

/* Move Client Login button in header */
#header .avia-button-left {
position: relative;
top: -38px;
left: 80%;
}
@media only screen and (max-width: 749px) {
#header .avia-button-left {
position: relative;
padding-bottom: 0;
top: -40px;
left: 33%;
}
}
@media only screen and (min-width: 750px) and (max-width: 1099px) {
#header .avia-button-left {
position: relative;
padding-bottom: 0;
padding-top: 0;
top: -120px;
left: 76%;
}
}

/* move phone number widget */
#header #text-12 {
position: relative;
top: 112px;
left: 18%;
}
@media only screen and (max-width: 749px) {
#header #text-12 {
position: relative;
padding-bottom: 0;
top: -20px;
left: 23%;
}
}
@media only screen and (min-width: 750px) and (max-width: 1099px) {
#header #text-12 {
position: relative;
padding-bottom: 0;
padding-top: 0;
top: -100px;
left: 66%;
}
}

Best regards,
Vinay

Hi,

Thank you for sharing the screenshots. The site looked good on my end after removing the conflicting CSS and adding the new code. The conflicting CSS on your browser was cached and hence you were not able to see the changes properly. If you haven’t changed anything please try to hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload” and review the site again.

If you changed the code please revert the changes and get back to us if you have any questions.

Best regards,
Vinay

Hi,

With the new css code that was added everything was looking nice. I’m sorry that the changes were not visible on your end dude to caching issue.
I din’t take screenshots in the hurry but I’m sure you would be happy with the way the header looked. However I’m glad it’s sorted for you now :)
Please feel free to get in touch with us via new ticket if you have any questions.

Best regards,
Vinay