Archived topic
Top bar issues
5 replies · Started by Mårten on October 26, 2018
Viewing posts 1–6 of 6
Hello,
I need some help with my top bar. I try to get the logos and the small text ("huvudsponsorer") to float right and that "Huvudsponsorer" are in line with the logos. Then I try to make sure everything looks good on the mobile. :D
Do you guys have any suggestions? Thank you for all the help I get.
The site i working on: http://las.entos.net/
Hi there,
give this a shot, first remove this CSS:
@media (min-width:769px) {
.inside-top-bar .textwidget {
padding: 0px 0px 0px 160px !important;
position: static;
text-align: center;
}And then add this:
.inside-top-bar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 5px 0;
}
#site-rubrik-2 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 900px) {
.inside-top-bar {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}Thanks so much! Looks perfect on desktop.
Is it possible that "huvudsponsorer" be on a separate line, over the logos on the mobile version?
Thanks again!
Try this:
@media (max-width: 768px) {
#site-rubrik-2 {
flex-wrap: wrap;
}
#site-rubrik-2 font {
flex: 1 0 100%;
margin-bottom: 5px;
}
#site-rubrik-2 img {
width: 75px !important;
}
}Perfect!
Thank you so much for the help. Now it looks so much better. :)
Glad to be of help
This archived topic is closed to new replies.
