Shop Categories

X

some quiestions an CSS Help needed

Home Forums Agama Pro some quiestions an CSS Help needed

Topic Resolution: Resolved

Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #27372
    maurogilardi
    Participant

    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.

    #27373
    Zex
    Moderator

    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

    #27375
    maurogilardi
    Participant

    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

    #27376
    Zex
    Moderator

    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.
    #27378
    maurogilardi
    Participant

    perfekt can i do the same with the breadcrums ?

    Best regards
    Mauro Gilardi

    #27379
    Zex
    Moderator

    Hi,

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

    just insert it into your custom CSS.

    #27393
    maurogilardi
    Participant

    all rigth thats works fine.

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

    Best regards

    #27394
    Zex
    Moderator

    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

    #27395
    maurogilardi
    Participant

    perfekt thank you very much
    no it looks phenomenal 🙂

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.