[LiquidDaveParticipant]

I want to modify the top bar so that the control panel button looks like the rest of the X buttons on my site https://v3.liquidvpn.com/liquidvpn-features/supported-vpn-tunnel/modulating-vpn-connection/ Can you tell me why it currently looks different?

[LiquidDaveParticipant]

Ideally I would like the button on the right of the social media icons

[Rue NelModerator]

Hello There,

Thanks for posting in!

To have the normal x button in your top bar and rearrange it to position on the right side of the social media icons, please add the following css code in the customizer, Appearance > Customize > Custom > CSS or insert this code in your child theme’s style.css (if you are using a child theme)

.x-topbar .p-info {
    float: right;
    margin-top: 5px;
    margin-bottom: 5px;
}
.x-topbar .p-info .x-btn {
    color: #a2a1a0;
    border-color: #a2a1a0;
}
.x-topbar .p-info .x-btn:hover {
  color: #8a0103;
  border-color: #8a0103;
  background-color: #a2a1a0;
}

.x-topbar .x-social-global {
    margin-right: 10px;
}

Please let us know if this has worked for you.

Thank you.

[LiquidDaveParticipant]

Not quite the top bar no longer floats properly and the social media icons look funny. Also how can I change the buttons background color to something that stands out more like #148080

[LiquidDaveParticipant]

Okay so I fixed the social media icons being off colored. However the top bar no longer floats, The button does not quite line up. The Icon is too close to the text and the button itself is to high. I think if it is inline with the social media icons the floating menu might work.

[Paul RModerator]

Hi,

Please replace the code given above with this.

.x-topbar .p-info {
    float: right;
    margin-top: 10px;
}
.x-topbar .p-info .x-btn {
    color: #a2a1a0;
    border-color: #a2a1a0;
}
.x-topbar .p-info .x-btn:hover {
  color: #8a0103;
  border-color: #8a0103;
  background-color: #a2a1a0;
}

.x-topbar .x-social-global {
    margin-right: 10px;
}

.x-topbar .x-btn.x-btn-mini {
    padding: 0.3em 0.923em;
}

.x-topbar .icon-LiquidMan:before {
   margin-right: 5px;
}

Hope that helps.

[LiquidDaveParticipant]

Okay much closer but the problem is the floating header still does not seem to work properly.

[Rue NelModerator]

Hello There,

We hope every thing we suggested with the codes given above works for you. We’re starting to get confuse here. We try to align the top bar, social media icons and the button in it. Which one is the floating header? Should it float or you mean the topbar will position as a sticky header.

Please explain further.

Thank you.

[LiquidDaveParticipant]

Sorry for the confusion, the sticky menu that holds the primary menu no longer sticks to the top of the page. If you go to the page and scroll down you can see how it begins to float at the top like it should but then stops.

[Rue NelModerator]

Hello Again,

To fix the sticky navbar, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media (min-width: 767px) {
  .x-navbar-fixed-top {
    position: fixed !important;
  }
}

Hope this helps.

[LiquidDaveParticipant]

thanks!

[ThaiModerator]

You’re always welcome.

[Author]

Posts