some quiestions an CSS Help needed
Tagged: navigation
- This topic has 8 replies, 2 voices, and was last updated 3 years, 4 months ago by
maurogilardi.
-
AuthorPosts
-
July 8, 2020 at 3:37 pm #27372
maurogilardi
ParticipantThe 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.July 8, 2020 at 5:54 pm #27373Zex
ModeratorHello,
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
July 9, 2020 at 7:35 am #27375maurogilardi
Participantlooks 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
MauroJuly 9, 2020 at 8:05 am #27376Zex
ModeratorHello,
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.
July 9, 2020 at 8:24 am #27378maurogilardi
Participantperfekt can i do the same with the breadcrums ?
Best regards
Mauro GilardiJuly 9, 2020 at 8:51 am #27379Zex
ModeratorHi,
The code I gave you in the previous post is for the breadcrumb.
just insert it into your custom CSS.
July 10, 2020 at 9:26 am #27393maurogilardi
Participantall rigth thats works fine.
is it somehoe possible to fix language flags on the mobile version an tablet as well ?
Best regards
July 10, 2020 at 10:05 am #27394Zex
ModeratorHi,
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
July 10, 2020 at 11:35 am #27395maurogilardi
Participantperfekt thank you very much
no it looks phenomenal 🙂 -
This reply was modified 3 years, 4 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.