Docs

[JW & Co.]

Good afternoon,

I added and then removed a topbar from my website, http://www.verobeachwebsitedesign.net.
Here is a picture: http://prnt.sc/dgjec7.

Can you please tell me how to add a “Members Only” link just like what was in the topbar, but without the social media icons? Additionally, I don’t want the topbar above my navbar – I want the “Members Only” link to float over the navbar itself. Does that make sense? Basically I don’t want the additional margin at the top of the page that the topbar adds.

Thanks.

[Rupok]

Hi there,

Thanks for writing in! There is no other place to put the link, so you need to place within the Topbar. Not sure how you want to make it members only but you can show/hide that for logged in user with some CSS. Are you using any membership plugin or just referring the logged in users?

Cheers!

[JW & Co.]

Hello Rupok,

I went ahead and added it back into the topbar as you suggested, but am still having the same issues I described above.

#1 Remove Social Media Icons
#2 Float topbar over navbar on all devices except smart phones so as to remove additional margin at top of page.

Thanks.

[Nico]

Hi There,

Thanks for the update.

You could remove the social media icons thru CSS and Customizer.

To remove using CSS, add this in your customizer > Custom > CSS:

.x-topbar .x-social-global {
display:none;
}

or you could remove the social media links you added in Customizer > Social.

2. Little confuse of what you want to achieve. Would you mind sharing us details on what you want to achieve.

Thanks.

[JW & Co.]

1. Great, thanks.

2. Here is a screenshot of what I am trying to achieve: http://prnt.sc/dgovwy. My goal is to right align the topbar content (the Members Only link), and to float it over the navbar. I don’t like the extra 45px the topbar adds to the top of the website, and I don’t want it distracting too much from the logo.

Thanks!

[Rue Nel]

Hello There,

Thanks for updating in! To right align the topbar content (the Members Only link), and to float it over the navbar, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(min-width: 980px){
  .x-topbar {
    min-height: 10px;
    border: none;
    margin-bottom: -20px;
  }

  .x-topbar .p-info {
    float: right;
  }
}

You could have something like this: http://prntscr.com/dgr606

Hope this helps.

[JW & Co.]

This is fabulous!

Thanks Rue Nel!

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts