Social container left - Support | Kriesi.at

Thanks for the theme support!

I’ve researched but haven’t found a way to place the social container far left on the screen. See screen shot in Private

My menu and header settings are as follows:
Logo left, menu right
Header social icons = Display in main header area
No phone and no secondary menu

My logo & burger Quick CSS:

html {
background-color: #f4f4f4 !important;
}
.logo img {
padding: 3px 0 3px 0;
}
/* Remove image overlay with circle and arrow */
.image-overlay {
display: none !important;
opacity: 0 !important;
}

/* Activate burger menu */
 @media only screen and (max-width: 2500px) {
#top #header .av-main-nav > li.menu-item  {
    display: none!important;
}
#top #header .av-burger-menu-main {
    cursor: pointer;
    display: block!important;
padding-top: 0 !important;
margin-top: 0 !important;
}}
#top #header_main .logo {
   left: 50%;
    margin-left: -125px;
}
.av_promobox .avia-button {
position: relative;
margin-top: 10px!important;
}
.avia-promocontent { margin-right: 0; 
}
.main_color strong {
font-weight: bold;
color: #444;
}
.av-share-box-list {
    border: none!important;
}
h5.av-share-link-description {
    text-align: center;
}
.av-share-box ul li {
    border: none;
}

.av-share-box ul { width: 50%; }
.av-share-box .av-share-link-description { display: none; }
.av-share-box ul li a { color: #109bc5!important; background-color: white!important; }
.av-share-box ul li a:hover { color: #666!important; background-color: white!important; }
.av-share-box-list, .av-share-box ul li {
    border: 0 !important;
}
h4, h5  {font-family: sans-serif !important;
}
h5  {
font-weight: 600 !important;
font-size: 14px;
}
.widgettitle {
  font-family: sans-serif !important;
font-size: 16px !important;
color: #0b5c73 !important;
}
#footer .widget li {
  font-size:14px !important;
}

.sidebar a, .sidebar a > strong {
     color: #109bc5 !important;
}

.sidebar a:hover, .sidebar a>strong:hover {
     color: #109bc5 !important;
}
@media only screen and (max-width: 767px) {
.responsive #scroll-top-link {
display: block !important;
.responsive .mobile_slide_out .logo {
margin-left: 35%;
.html_av-overlay-side .av-burger-overlay-scroll {
width: 70% !important;
}}

This topic was modified 4 years, 7 months ago by welswebmaster. Reason: Updated CSS

April 24, 2020 at 5:27 pm #1206871

Victoria

Hey Julie,

Could you please give us a link to your website, we need more context to be able to help you.

Best regards,
Victoria

April 26, 2020 at 5:23 pm #1207305

Hi Victoria,
The URL of the domain (same as attachment) is in the Private Data field.

April 29, 2020 at 7:09 pm #1208269

I’d like to hide the logo totally on mobile. (Its in the menu and footer already) How do I do that?

April 30, 2020 at 12:59 am #1208409

Hi,

Hide the logo with the following:

@media only screen and (max-width: 767px){
.responsive .logo img {
    display:none!important;
}}

Best regards,
Jordan Shannon

April 30, 2020 at 1:38 pm #1208505

Thanks, Jordan for the CSS to hide the logo. What about how to position the social icons to the left side of the logo – just for desktop view? Right now they are hidden for tablet and mobile which is fine.

April 30, 2020 at 4:58 pm #1208547

Hi,

Add this to quick css:

@media (min-width: 1281px) {
.main_menu{
    position: absolute!important;
    left: 0!important;
}


.av-hamburger{
    position: absolute!important;
    float: right!important;
    left: 75vw!important;
}}


@media (min-width: 1025px) and (max-width: 1280px) {
.main_menu{
    position: absolute!important;
    left: 0!important;
}

.av-hamburger{
    position: absolute!important;
    float: right!important;
    left: 75vw!important;
}}

Best regards,
Jordan Shannon

April 30, 2020 at 5:43 pm #1208575

Hi Jordan,
Oh so close! There is an invisible YET clickable burger menu far left. If you hover over top far left of the social icons (which are getting bumped right because of it, you can click and it opens the burger menu on the right.

Click left burger which is invisible, and it opens right top burger visible.
Fix?

April 30, 2020 at 5:49 pm #1208578

Hi,

I see adjust the code to this:

@media (min-width: 1281px) {
.main_menu{
    position: absolute!important;
    left: 0!important;
}
.av-hamburger{
    position: absolute!important;
    float: right!important;
    left: 75vw!important;
}
.avia-menu.av-main-nav-wrap.av_menu_icon_beside{
    position: absolute!important;
    float: right!important;
    left:0 !important;
}}


@media (min-width: 1025px) and (max-width: 1280px) {
.main_menu{
    position: absolute!important;
    left: 0!important;
}
.av-hamburger{
    position: absolute!important;
    float: right!important;
    left: 75vw!important;
}
.avia-menu.av-main-nav-wrap.av_menu_icon_beside{
    position: absolute!important;
    float: right!important;
    left:0 !important;
}}

Best regards,
Jordan Shannon

April 30, 2020 at 5:55 pm #1208583

Jordan,
That worked. Beautiful! Thanks for the speedy response too!

April 30, 2020 at 6:03 pm #1208598