Skip to content
Public Ticket #13580

Topbar icons in the same line

Conversation thread

miki31-7 replied

6 years ago
Customer Reply

Amazing, thank you.

PenciDesign replied

6 years ago
Staff Reply

Hi,

Please add more this code to Customize > Custom CSS to do that:

@media only screen and (max-width: 960px){
.penci-top-bar.topbar-menu{ padding-top: 5px; }
}

Best Regards,

PenciDesign

miki31-7 replied

6 years ago
Customer Reply

Thank you, it works but on mobile the menu appears de-centered vertically (close to the bottom border and far from the upper border), I increased Height to 40px and decreased line-height to 20px and the menu was centered again, but the line-height change doesn't apply to social icons which remained de-centered. Is there a way to center the social icons too?

Screenshot: jYHBX1G.jpg

PenciDesign replied

6 years ago
Staff Reply

Hi,

Please try add more this code to Customize > Custom CSS to do that:

@media only screen and (max-width: 960px){
.penci-top-bar.topbar-menu{ height: 32px; text-align: left; }
ul.penci-topbar-menu, div.penci-topbar-menu > ul{
   width: auto;
}
ul.penci-topbar-menu > li a, div.penci-topbar-menu > ul > li a {
    line-height: 32px;
}
.penci-topbar-social{ float: right; }
}

Best Regards,

PenciDesign

miki31-7 started the conversation

6 years ago
Conversation Start

Hi, just a quick question for one of my websites with Soledad.

From desktop the topbar menu and the social icons are showed in the same line and that's beautiful, but from mobile they show in two different lines (you can check the screenshots below). 

Can you tell me how can I put the topbar menu and the social icons in the same line on mobile like happened on the desktop version?

Want to join this conversation or access attachments? Sign in first.

Login to Reply