Top Bar Alignment

Prasant · January 3, 2019, 12:57am

Thanks for asking.

Please add following CSS under X > Theme Options > CSS:

.phonetext {
    margin-bottom: 0;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

quituck · January 3, 2019, 1:19am

Thanks for the prompt reply. That did not help me to align and center my top bar text. I would like it to be aligned with my topbar button text. Any idea how I can do that?

I’ve tried using text-align:center; and that did not work.

Thanks.

ruenel · January 3, 2019, 3:22am

Hello @quituck,

You mean do you want something like this?

Well in that case, please do the following:

Please update your topbar content and use the code below.
– You do not need to wrap it with <p> tag because it is already wrap with a p tag.

see the secure note.

Add this custom css:

.x-topbar .p-info {
    margin-top: 0;
    padding-top: 0;
}

And update your custom css too:

.phonetext {
    margin-bottom: 0;
    text-align: center;
    line-height: 60px;
    margin-right: 10px;
}

We would loved to know if this has work for you. Thank you.

quituck · January 3, 2019, 3:57am

Yes That worked. Thank you so much.

However, I have another issue now.

I would like my button spaced more towards the right corner of the top bar and leave the text where it is. I want a bigger space between the text and the button. Any suggestions how I can do that?

I also am having trouble placing icons in-front of my phone and email. I read several thread and found that the short code does not work in the top bar.

I have tried several things and noting has worked. I would like a phone icon in front of my number and an envelop before the email.

I have tried this code but found here https://theme.co/apex/forums/topic/adding-icon-in-menu-bar/
it worked but I don’t know unicode for the icons I need.

I also tried code from this thread and did not work. https://theme.co/apex/forums/topic/how-to-insert-icons-into-topbar/
Text

Please advise thanks

ruenel · January 3, 2019, 5:02am

Hello @quituck,

I would like my button spaced more towards the right corner of the top bar and leave the text where it is. I want a bigger space between the text and the button. Any suggestions how I can do that?

Please update your custom css:

.x-topbar .p-info {
    margin-top: 0;
    padding-top: 0;

}

The icon shortcode is not supported in the topbar content. You will need to customize it so that shortcodes can be used and rendered. Since the child theme is set up, please add the following code in your child theme’s functions.php file:

add_filter('x_option_x_topbar_content', 'top_bar_content_shortcode');

function top_bar_content_shortcode ( $content ) {
    return do_shortcode ( $content );
}

After that you can add the shortcodes in X/Pro > Header > Miscellaneous > Topbar > Topbar Content.

Thanks.

quituck · January 3, 2019, 5:42pm

Hi, So I was able to do what I wanted however the top bar doesn’t look good on mobile.

Here are my problems:

There is a pale border that I want removed.
I want the button fixed in the top left corner.
I need to make the text responsive so it’s smaller on mobile. I’m use to the h-responsive settings but don’t know how to apply it to to top bar. I was thinking I could make it in button form but I want your advice first.
lastly the top bar is too thick on mobile. How can I make sure it stays thin link on desktop?

Thanks again

Pic of top bar in mobile view.

rad · January 3, 2019, 7:43pm

Hi @quituck,

Please update the CSS that Nel’s provided to this

.x-topbar .p-info {
    margin-top: 0;
    padding-top: 0;
   border: 0px !important;
}

Please add this CSS as well,

@media (max-width: 767px) {
.my-tbbutton {
    float: none;
    position: absolute;
    top: 0;
/* change this to right:0; if you're going to follow the information in the screenshot */
    left: 0; 
}
.x-topbar .p-info {
padding-top: 63px !important;
}
}

I tried and it seems impossible due to the structure of the topbar. The text resizes down but the problem is putting them in the order you prefer. But please change the #2 CSS from my reply to this

@media (max-width: 767px) {
.my-tbbutton {
    float: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    font-size: 10px;
    padding: 20px 15px;
}
.x-topbar .p-info {
padding-top: 10px !important;
}
.x-topbar-inner {
width: 100% !important;
}
.phonetext {
    font-size: 14px;
    text-align: left;
    width: 60%;
    display: block;
    line-height: initial;
}
.phonenumber {
text-align: left;
}
}

Could you try uploading the correct logo image first so I know the exact dimension of your header? It’s currently not accessible https://**************.com/wp-content/uploads/2018/12/logo03.png and because of that, the logo fall back to text which is thick.

Thanks!

quituck · January 3, 2019, 11:03pm

Okay. That sort of worked. It’s looking great overall. Thank for all of you help. I really do appreciate it all. You guys are the best.

3 issues.

The top bar is super glitchy when I hover over the links. Not sure whats wrong there or how to fix it.
And I would like the phone and envelope to break on separate lines in mobile view.
The button isn’t quite touching the bottom.

friech · January 4, 2019, 2:18am

Hi There,

Please find this custom CSS on your Theme Options and remove it, that is the code that cause the glitching on topbar.

.x-topbar .p-info a:hover {
    float: left;
    background: rgb(17,81,154);
    color: white !important;
    display: inline-block;
    padding: 22px;
}

That is not quit possible with the current markup of your icon/link. Please wrap the icon and anchor text in the same <div> tag first.
Please do not position: absolute; your button because that will go out of bounds of the topbar.

Here’s another approach on this that is less complicated, please create a Global Block that will act as your Topbar.

After that setup an x child theme and activate it.

Then login to your server via FTP or cPanel’s File Manager and create this directory to your child theme

\framework\views\global

In that folder create a file named _topbar.php then add this as the content of that 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">
   		 <?php echo do_shortcode( 'YOUR GLOBAL BLOCK SHORTCODE HERE' ); ?>
    </div>
  </div>

<?php endif; ?>

Replace the YOUR GLOBAL BLOCK SHORTCODE HERE with the actual shortcode of your Global Block you created, then save.

This may look intimidating, but don’t. If you do this correctly, you’ll get a Topbar that is easy to edit like a page content.

Thanks,

quituck · January 4, 2019, 3:46pm

I was able to fix almost all of my problems with your help. Thank you!

When I wrap the text in div it moves the button below the text. How can I add the div while keeping the button where it is? So it won’t affect the text appearance. I do like how it put the contact on two separate lines.

I really like the idea of a global block but don’t think that is necessary unless I can’t get the look I want.

Other than the div issue, I have one last problem regarding this top bar.

I need the button to align with the bottom of the top-bar on mobile.

It aligns with the tablet, desktop, and laptop. Just NOT mobile.

I’ve tried playing around with the padding. However, when I get it to align with mobile the button becomes too big in tablet and vice verse.

Here is the code I’ve been changing.

@media (max-width: 767px) {
.my-tbbutton {
float: none;
position: absolute;
top: 0;
right: 0;
width: 40%;
font-size: 10px;
padding: 21.5px 15px;
}

When I change the padding to 30.5 it aligns with the mobile but becomes too big for tablet.

Can you please help?

Thank you.

rad · January 4, 2019, 6:17pm

Hi @quituck

What I provided was for mobile view only (hence @media (max-width: 767px)), so I’m not sure why it’s affecting other views when you’re editing them. I provided it assuming that you’re intentionally displaying a different view on mobile than other devices.

If you’re trying to make it behave or work like a Pro header (where sections, columns, layout, contents are responsive) then I recommend using global block too. It should work there as it has Hide during break points (https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378) option applicable for multiple devices. Just like how you build contents, then simply add the shortcode to your topbar.

Thanks!

quituck · January 4, 2019, 4:48pm

I’m just going to create a global block and let you know how it goes.

Prasant · January 4, 2019, 5:07pm

Sure, let us know how it goes.

Thanks.

quituck · January 4, 2019, 5:53pm

The global tab bar was a great idea. I liked that much better and it was a lot easier to customize.

I just have one concern. I would like to section to remain think across all devices. It that something I can do?

I removed all the padding and it bigger than I would like on mobile. Any suggestions on how I can keep the top bar small?

Like I referenced when I posted this image >>> Pic of top bar in mobile view.

rad · January 4, 2019, 6:26pm

Hi @quituck,

Do you mean to make the topbar similar to this (shorter) based on your initial details?

Or are you trying to have an exact design from your screenshot where the logo, red button, and mobile menu are in single line together (top bar and header bar combined) because it’s not possible in X theme’s standard header?

Thanks!

quituck · January 4, 2019, 11:16pm

I really appreciate all your guys help through all of this. I have the top bar design compete and I am all set with this website.

Thank You Again!

ruenel · January 5, 2019, 2:12am

You are most welcome!
We’re glad we were able to help you out.

quituck · January 9, 2019, 5:01pm

I would like to make my footer into a global block like my top bar. Can you advise me on what folder I need to create and add?

friech · January 9, 2019, 9:43pm

Hi There,

We kindly ask to create a separate thread for your new query, as this one is getting longer and harder to follow.

Thank you,

system · January 19, 2019, 9:43pm

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.