Docs

[Oliver V]

Hello!

Everything updated.

In my site oliver.ideasparatriunfar.com I need some help in the topbar area.

As you can see here: http://prntscr.com/cqxxuy I need to align right the social icons and have them in the same line and the left suscription content.

In addition, when making the screen smaller, I have this result: http://prntscr.com/cqxykd I would need the x subscription are to use all the width of the page and remove the margin of the sentence area…

This is the code I have in my customizer CSS:

.x-topbar .p-info, .x-topbar .x-social-global a {
color: white;
}
.x-social-global a:hover {
color : rgb(226,224,224) !important;
}
.x-colophon .x-social-global a {
color: white;}
.x-topbar .x-subscribe-form {
max-width:none !important;
}

.x-topbar .x-subscribe-form fieldset {
display: inline-block;
vertical-align: middle;
}

.x-topbar .x-subscribe-form input[type=”submit”] {
margin:0;
}

.x-topbar .x-subscribe-form input[type=”text”],
.x-topbar .x-subscribe-form input[type=”email”] {
margin-bottom: 0;
}
/*text size adjustment*/
.x-topbar .x-subscribe-form {
font-size: .8em !important;
}
/*Email field adjustment*/
.x-topbar .x-subscribe-form fieldset:first-of-type {width: 30%;}

Thanks in advance for your help!

Oliver.

[Joao]

Hi There,

Please add the following code to Appereance > customizer > Custom > CSS

.x-topbar .x-social-global {
    margin-top: -70px;
}

.x-topbar {
    max-height: 80px;
}

@media (max-width: 767px) {
.x-topbar .p-info {
background: none;
border: none;
.x-topbar .x-social-global {
      margin-top: -20px;
}
.x-topbar #x-section-2 {
border: none;
}
.x-topbar .x-subscribe-form fieldset:first-of-type {
    width: 70%;
    margin-top: 5px;
}
}

Hope that helps

Joao

[Oliver V]

Hello! Many thanks!

I have added to previous code to my existing CSS code and the result is perfect in big screens.

Howeven, in small screen I have this result: http://prntscr.com/cr36rf

The social icons “overlaps” the Suscribe option. We would need to have the social icons in a new line and use all the width available for the Email address and suscribe button.

Thanks in advance for your help! Always a please to use X theme!!

Oliver.

[Christopher]

Hi there,

Plase put following code with in media query rule :

.x-topbar .x-social-global {
    margin-top: -70px;
}
.x-topbar {
    max-height: 80px;
}

The new code would be :

@media (max-width:767px){
.x-topbar .x-social-global {
    margin-top: -70px;
}
.x-topbar {
    max-height: 80px;
}
}

Hope it helps.

[Oliver V]

Hello!

Many thanks. Still not working.

With this code:

@media (max-width:767px){
.x-topbar .x-social-global {
margin-top: -70px;
}
.x-topbar {
max-height: 80px;
}
}

The result is a all width sucription email field like here even in big screens: http://prntscr.com/cr9ywi and when making the screen smaller http://prntscr.com/cr9z29 the Email field is not using all the width, the buttom is in other line (should be same line as email field), and as you can see social icons are in other line (which is good), but then we need to increase the green background.

Thanks in advance for your help!

Oliver.

[Christopher]

Hi there,

I’m sorry, my mistake.
Please update your code to :

@media (min-width:767px){
.x-topbar .x-social-global {
    margin-top: -70px;
}
.x-topbar {
    max-height: 80px;
}

}

Please find following code and remove one of them, put the other on within media query rule :

.x-topbar .x-subscribe-form fieldset:first-of-type {
    width: 70%;
    margin-top: 5px;
}
.x-topbar .x-subscribe-form fieldset:first-of-type {
    width: 30%;
}

Hope it helps.

[Oliver V]

Hello!

Thanks for your suggestion.

I have try this code:

@media (min-width:767px){
.x-topbar .x-social-global {
margin-top: -70px;
}
.x-topbar {
max-height: 80px;
}
.x-topbar .x-subscribe-form fieldset:first-of-type {
width: 30%;
}
}

But still same problem when reducing the screen size…

Any other ideas?

Thanks!

Oliver.

[Oliver V]

Hello!

Don´t worry about the previous. We have been working with the ubermenu and change some designs.

Right now we need to:

1. Align right the x suscriber, like here: http://prntscr.com/cricvo
2. In smaller devices, see properly the x suscriber field.
3. We don´t know why, the mobile button from Ubermenu does not work in small screens. Any idea?

our site was oliver.ideasparatriunfar.com

Thanks!

Oliver

[Oliver V]

Hello again:

1. I have already align the suscriber, but I am not able to fix the p.info field. See http://prntscr.com/crih1e As well, I would need to reduce to minimum the top margin of the top bar.

2. Same problem.

3. I have seen that it seems it is a problem with the margins. I need to hove the mouse very “low” in order to activate the selection.

Thanks for your help!

Oliver.

[Oliver V]

We should add point 4 here:

4. I have added a new logo, but the topbar background overlaps it. You can see it here: http://prntscr.com/crirkm and what I have changed in the customizer.

Thanks!

[Rue Nel]

Hello There,

Thanks for updating in! How did you added the subscription form? Through a shortcode in topbar content? or just a plain html in the topbar content? To do this properly, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?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; ?>

      
      <!-- Add the subscription form here -->

      <?php x_social_global(); ?>
    </div>
  </div>

<?php endif; ?>

You must supply the subscription html code and if it is a shortcode, you will need this instead:

<?php echo do_shortcode('[x_subscribe form="1234"]'); ?>

3] Save the file named as _topbar.php
4] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/global/

And then if still the menu is not clickable, that would be because the form is on top of the menu. You’ll gonna need another custom css for that. please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .x-navbar-inner {
  position: relative;
  z-index: 16000;
}

Please let us know if this works out for you.

[Oliver V]

Hello!

Many thanks for the options.

At the moment, I have this error in a white screen:

Parse error: in /home/ideaspar/public_html/oliver/wp-content/themes/x-child/framework/views/global/_topbar.php on line 21

The code I have added in _topbar.php is:

<?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 echo do_shortcode('[x_subscribe form=“48”]’); ?>

      <?php x_social_global(); ?>
    </div>
  </div>

<?php endif; ?>

What is it wrong?

Thanks!

Oliver.

[Rad]

Hello!

It’s due to quotes, please change this line

<?php echo do_shortcode('[x_subscribe form=“48”]’); ?>

with this new one

<?php echo do_shortcode('[x_subscribe form="48"]'); ?>

Cheers!

[Oliver V]

Ok. Already changed.

But still not fixed.

I haven´t added at the end your code:

.site .x-navbar-inner {
position: relative;
z-index: 16000;
}

With the _topbar.php file the menu icons are already clickable. However, the logo is clickable only around 20%.

1. We will need to fix the logo “clickable area”.

2. The result of the _topbar.php file is this: http://prntscr.com/crnfjh The final desired result is written in red. Now I have event 2 Suscriptions fields…
I have played with the code I have in the CSS customizer, without any result. Just in case is related, here you can see it:

.x-topbar .p-info, a {
color: grey;
}
.x-topbar {
background-color:transparent;
margin-bottom:10px;
}
.x-topbar .x-social-global a{
display:none;
}
.x-social-global a:hover {
color : rgb(226,224,224) !important;
}
.x-colophon .x-social-global a {
color: white;}

.x-topbar .x-subscribe-form {
max-width:none !important;
}
.x-topbar .x-subscribe-form fieldset {
display: inline-block;

}
.x-topbar {
text-align:right;
}
.x-topbar .x-subscribe-form input[type=”submit”] {
margin:0;
}

.x-topbar .x-subscribe-form input[type=”text”],
.x-topbar .x-subscribe-form input[type=”email”] {
margin-bottom: 0;
}

.x-topbar {
max-height: 70px;
}

.x-topbar #x-section-2 {
border: none;
}

.x-navbar{
border-bottom: none;
}
.x-brand {
margin-bottom: 30px;
}

@media (min-width:767px){
.x-topbar {
max-height: 10px;
}
.x-topbar .x-subscribe-form fieldset:first-of-type {
width: 30%;
}
}

Thanks in advance for your support!!!

Oliver.

[Oliver V]

By the way, just removed the suscription shortcode from my Topbar Content in the customizer. Now there is only one suscription field, so we just need to align the fields and p-info and make the logo clickable. See http://prntscr.com/crnhdb

[Author]

Posts