Docs

[Bijan]

Hi guys,

in the header topbar section i’ve put the following

<p><a href="https://clients.mindbodyonline.com/classic/ws?studioid=34277&stype=-98" class="topbar-right-text" >Sign-up | Log in</a></p>

<p><a href="new-student-offer"  class="topbar-center-text" title=" 10 classes in 1 month">NEW STUDENT OFFER: 10 CLASSES FOR €50 </a></p>

but it appears as such (leaves out the sign up/login part and alligns weird)
and on mobile it’s even more sad

http://www.yagoy.nl

please help

[Bijan]

Also,
the custom css I have going on is the following

/* Change the topbar height */
.x-topbar{
  height: 40px
}

/* Change the topbar font size */
.x-topbar .p-info, .x-topbar .p-info a{
  font-size:16px!important;
}
.x-topbar .p-info {
  position: relative;
  z-index: 9999;
}

/* for social icon */
.x-topbar .x-social-global a {
  font-size:25px!important;
}

.x-topbar .x-social-global {
    float: left;
    margin-top: 0;
    position: absolute;
    top: 10px;
}

.x-topbar-inner {
    position: relative;
}
.x-topbar-inner p:nth-child(2) {
    margin-top: 10px;
}

@media (max-width: 480px) {
  .p-info {
    display: block;
    width: 100%;
  }
}

.x-btn.sale {
  color: #ffffff;
  border-color: #2d999f;
  background-color: #35b3ba;
}

.x-btn.sale:hover {
  color: #ffffff;
  border-color: #4cc6cd;
  background-color: #4cc6cd;
}
.x-btn.square {
  color: #000000;
  border-color: #ffffff;
  background-color: #ffffff;
}

.x-btn.square:hover {
  color: #000000;
  border-color: #d9d9d9;
  background-color: #d9d9d9;
}

.topbar-center-text  {
display: inline-block;
    margin: 0 auto;
    width: 100%;
    position: relative;
    top: -30px;
    text-align: center;
}

.topbar-right-text  {
display: inline-block;
    margin: 0 auto;
    width: 100%;
    position: relative;
    top: -30px;
    text-align: right;
}

.format-standard .entry-content a:not(.x-btn):not(.x-img-thumbnail) {
border-bottom: none;
}

.textwidget {
  margin: 0 auto;
  display: block;
  text-align: center;
}

[Paul R]

Hi,

Please change the code that reads.

.topbar-center-text  {
    display: inline-block;
    margin: 0 auto;
    width: 100%;
    position: relative;
    top: -30px;
    text-align: center;
}

to

.topbar-center-text  {
    display: inline-block;
    margin: 0 auto;
    width: 100%;
    position: relative;   
    text-align: center;
}

Then add this in custom > css

.x-topbar p {
     display:inline-block;
     width:33.33%;
}

.x-topbar p:empty {
    display:none;
}

Hope that helps

[Bijan]

hi Paul,

it shows up like this,
not good…

http://www.yagoy.nl it is

[Rupok]

Hi there,

Thanks for updating. Here is a screenshot on my end – http://prntscr.com/ar7enz

Would you clarify what you are trying to achieve this right now? “not good…” is a bit ambiguous and we are not sure about your choice.

Cheers!

[Bijan]

sorry for the ambiguity,

the sign-up|login part I would like to have alligned all the way to the right,

and if we look at the mobile view, I would just like the topbar to be hidden OR
not have the social buttons stacked, and the text “NEW STUDENT OFFER :10 CLASSES 50E” also in one line,
and also the sign up/log in in 1 line,

now it’s one big mess…

[Paul R]

Hi,

We need to reorder the code in your topbar.

Please replace your code in _topbar.php with this.

<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?>
      <?php x_social_global(); ?>
      <p><a href="new-student-offer"  class="topbar-center-text" title=" 10 classes in 1 month">NEW STUDENT OFFER: 10 CLASSES FOR €50 </a></p>
      <p style="text-align:right;"><a href="https://clients.mindbodyonline.com/classic/ws?studioid=34277&stype=-98" class="topbar-right-text" >Sign-up | Log in</a></p>
    </div>
  </div>

<?php endif; ?>

If that doesn’t help please provide us your wordpress admin login and ftp login in private reply.

Thanks

[Bijan]

I’ve put the codee in and put the topbar.php in my child theme, still no success

[Bijan]

This reply has been marked as private.

[Friech]

Hi There,

I saw the issue of text over lapping, and I saw two instances of those text in topbar and logobar. Regretfully, at this time I am not entirely certain what it is you would like to accomplish. Would you mind providing us a visual reference of your design? Desktop and Mobile view.

We’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

[Bijan]

for desktop view, see screenshot 8
for mobile I have made a mock up in screenshot 13

[Christopher]

Hi there,

Please remove the code from _topbar.php file and add this in topbar area in customizer :

<div class="x-section pam">
<div class="x-column x-1-2 x-sm"><a href="new-student-offer"  class="topbar-center-text" title=" 10 classes in 1 month">NEW STUDENT OFFER: 10 CLASSES FOR €50 </a></div>
<div class="x-column x-1-2 x-sm"><a href="https://clients.mindbodyonline.com/classic/ws?studioid=34277&stype=-98" class="topbar-right-text" >Sign-up | Log in</a></div>
</div>

Hope it helps.

[Bijan]

Unfortunately,

this also gives the wrong allignment…see the screenshot

please advise / maybe I should delete some of the old css?

[Rad]

Hi there,

It looks aligned for me, are you perhaps referring to full-width topbar? Where there is no space in both sides?

How about providing a mockup design your what we should expect?

Thanks!

[Bijan]

the new student offer should be centered…
and mobile view is also still incorrect

Why is it that so many different people are handling this thread?
You guys are helping me out but it’s also taking way too long to fix this because i have to keep explaining…

also see my post #879528

hope we can get this done quick!

[Author]

Posts