Head Social Module Overlaps?

havas

Head social module overlaps with the logo in mobile view?

Thank you...

saguaros

You can try this custom css rule:

@media (max-width: 576px){
.logo {
text-align: left;
margin-left: 40px;
}
}

havas

Hi, @saguaros

What is the name of the file? Can you show me the path?

dominic

Hi havas,
You can create the custom.css file in the /templates/ja_magz_ii/css/ folder and then add the CSS code to this file.

havas

Hello @dominic ,

I did but the module is not centered with the logo?

dominic

Hi havas,
I think you should move the social icon to the topbar, You can use the following CSS code

@media (max-width: 480px) {
.t3-header {
    margin-top: 30px;
}
.t3-header .headright .head-social {
    position: fixed;
    top: 0;
    background: #555;
    left: 0;
    height: 30px;
    text-align: center;
    width: 100%;
    padding: 0;
}
.t3-header .headright .head-social .social-list {
    padding: 0;
    margin: 0;
}
.t3-header .headright .head-search .search-full {
    top: 90px;
}
}

Hope this helps!

havas

Thank you so much @dominic ! 🙂