Docs

[mdmason23]

Hello,

1- I’d like to add ” | ” between the login|register and logout|account links in my topbar. I’ve added the following to my custom css in the customizer, but it is not doing what I’d like. What am I doing wrong? (The links were added via html code in customizer > header > topbar)

.wp-register-url:before,
.wp-account-url:before {
content: ‘ | ‘;
}

2- After I added the links in #1 to the topbar, my free shipping notification would no longer align to the center. How can I fix this?

Thanks!

[mdmason23]

This reply has been marked as private.

[Christopher]

Hi there,

No need to add CSS, you can divide them with pipe.

e.g :

<span style="float: left; font-size: 11pt;"><a href="https://www.taiyaz.com/my-account/" class="wp-login-url"><i class="x-icon-key" data-x-icon=""></i> Log In</a> | 
<a href="https://www.taiyaz.com/my-account/" class="wp-register-url"><i class="x-icon-pencil-square-o" data-x-icon=""></i> Register </a> | 
<a href="https://www.taiyaz.com/my-account/customer-logout/" class="wp-logout-url"><i class="x-icon-sign-out" data-x-icon=""></i> Log Out</a> | 
<a href="https://www.taiyaz.com/my-account/" class="wp-account-url"><i class="x-icon-user" data-x-icon=""></i> Account </a></span>

Wrap free shiping with <span></span> tags and align it to center.

<span style="display:inline-block;text-align:center;">text</span>

Hope it helps.

[mdmason23]

Dividing the links with a pipe worked great, but the shipping text will not align to the center. I removed the css I had added to the customizer and made your suggested changes in the topbar field, but now the shipping text is aligned to the left. I’m baffled.

[Rue Nel]

Hello There,

Thanks for updating in! Do you want something like this http://prntscr.com/ejbe2e? If that is the case, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

.x-topbar .p-info {
    display: block;
    float: none;
    text-align: center;
}

Please let us know if this works out for you.

[mdmason23]

yes, but the free shipping is not properly centered…I’d like it centered over my logo in the header. The css above is what I just removed from the customizer.

[mdmason23]

I’d like it to appear like on this website:
http://catherineandjean.com/

[Rue Nel]

Hello There,

Thanks for updating in! Please put it back so that we can check it see how it goes. When you add it, you should see something like this: http://prntscr.com/ejbr4r

Please let us know your thoughts on it.

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.x-topbar .x-topbar-inner.x-container.max {
    position:relative;
}

.x-topbar .my-account {
    position:absolute;
    left:0;
}

.x-topbar .p-info {
   width:100%;
   text-align:center;
}

Hope that helps.

[mdmason23]

Hello,

I thought I had this all sorted out, but now when viewing my website on a mobile device, the links in the left topbar sit over top of the free shipping notice. Is there a way to make the topbar responsive so that the links sit above the free shipping only when viewed on a mobile device?

I have attached a screenshot from my phone so you can see the problem.

Thanks!

[mdmason23]

One other thing I notice…I don’t want the “account” link to appear at the same time as the login & register links. I’d like the links to be “login | register” when logged out, and “logout | account” when logged in.

Thanks a bunch!

[Lely]

Hi There,

For the link to sit on top of free shipping notice on mobile, please use this custom CSS:

@media (max-width: 767px){
.x-topbar .my-account {
    position: relative;
    display: block;
    float: none !important;
}
}

Use this CSS to hide account link on logout:

body:not(.logged-in) a.wp-account-url {
    display: none;
}

Hope this helps.

[mdmason23]

The account link is now hidden, but the provided code for the display on mobile did not do anything. I have also added my social media icons in the header, and entered the following code to ensure they were inline with everything else in the topbar:

.x-topbar .x-social-global {
  position: absolute;
  right:0;
}

The social media icons are now not wrapping to the line below my logo. I’ve attached another screenshot to show what it looks like on a mobile device after adding the code suggested above.

Thanks!

[Lely]

Hi There,

Please try clear your phone browser cache or use incognito mode. See attached screenshot.
Then also update this CSS to align social link on mobile properly.

.x-topbar .x-social-global {
  position: absolute;
  right:0;
}

To this:

@media (min-width:768px){
.x-topbar .x-social-global {
  position: absolute;
  right:0;
}
}

[Author]

Posts