some quiestions an CSS Help needed

[maurogilardi]

The Following “problems” i need to fix.
– The Social Icons are located in the right top Edge if i zoom in or out of the page it moves but it should stay fixed in this edge
– if I enable the Top Navigation its located on the left and i would like to have it just above the navigation fixed on the right top Edge so i can Enable the Language posibility.

[Zex]

Hello,

Try to Insert the following css codes into Customizing->General->Additional CSS:

@media screen and (min-width: 993px){
.top-bar-out #top-bar,
.top-bat-out #top-bar-wrap{
    display: block!important;
    position: fixed!important;
    top: 0!important;
    background-color: rgba(255,255,255,0.9);!important;
    max-width:1600px!important;
    width:100%!important;
    padding:0 20px;
    z-index:9!important;
    border-top-style: solid;
        border-top-color: #002d5b;
        border-top-width: 17px!important;
    }
    .sticky-header-shrink{
        top:106px;
        border:none!important;
    }
   #top-bar-wrap{
    display:flex!important;
    flex-direction: column-reverse;
    max-width: 1600px!important;    
}
   #top-bar .pull-left,
   #top-bar .pull-right{
     margin-right: 0px!important;
     margin-left:auto;
    }
}

Regards

[maurogilardi]

looks great now.. thanks for that 🙂

How can i do the same with the page titles that the page title stays on the left side in Desktop mode and center in Mobile view.

best regards
Mauro

[Zex]

Hello,

Insert additionally following codes at the same place:

.vision-page-title-bar.vision-page-title-bar-breadcrumbs.vision-page-title-bar-left{
    position: fixed!important;
    top: 120!important;
    max-width:1600px!important;
    width:100%!important;
    z-index:9!important;
}
#page.site{
    margin-top: 60px!important;
}
body.top-bar-out .vision-page-title-bar.vision-page-title-bar-breadcrumbs.vision-page-title-bar-left{
    top: 130px!important;
    background-color: rgba(255,255,255,0.9)!important;
}
@media screen and (max-width: 992px){
body.top-bar-out .vision-page-title-bar.vision-page-title-bar-breadcrumbs.vision-page-title-bar-left{
    top: 0px!important;
   }  
}

Regards

• This reply was modified 3 years, 4 months ago by Zex.

[maurogilardi]

perfekt can i do the same with the breadcrums ?

Best regards
Mauro Gilardi

[Zex]

Hi,

The code I gave you in the previous post is for the breadcrumb.

just insert it into your custom CSS.

[maurogilardi]

all rigth thats works fine.

is it somehoe possible to fix language flags on the mobile version an tablet as well ?

Best regards

[Zex]

Hi,

Try to add the following CSS code:

@media screen and (max-width: 992px){
#top-bar-wrap {
    display: block!important;
}
    .top-links ul li:not(.lang-item){
        display:none;
    }
    #masthead .pull-left:not(#agama-logo){
    float: right!important;
    }   
}

Regards

[maurogilardi]

perfekt thank you very much
no it looks phenomenal 🙂

[Author]

Posts