Top Bar Button Styling – Themeco Community

Top Bar Button Styling

LiquidDave — Thu, 19 Mar 2015 03:19:14 +0000

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?

Reply To: Top Bar Button Styling

LiquidDave — Thu, 19 Mar 2015 03:22:45 +0000

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

Reply To: Top Bar Button Styling

Rue Nel — Thu, 19 Mar 2015 05:48:11 +0000

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.

Reply To: Top Bar Button Styling

LiquidDave — Fri, 20 Mar 2015 03:55:39 +0000

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

Reply To: Top Bar Button Styling

LiquidDave — Fri, 20 Mar 2015 04:43:29 +0000

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.

Reply To: Top Bar Button Styling

Paul R — Fri, 20 Mar 2015 13:54:36 +0000

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.

Reply To: Top Bar Button Styling

LiquidDave — Fri, 20 Mar 2015 19:07:38 +0000

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

Reply To: Top Bar Button Styling

Rue Nel — Sat, 21 Mar 2015 08:07:23 +0000

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.

Reply To: Top Bar Button Styling

LiquidDave — Sat, 21 Mar 2015 20:01:20 +0000

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.

Reply To: Top Bar Button Styling

Rue Nel — Sun, 22 Mar 2015 07:03:47 +0000

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.