Getting the top bar to display in one line

Support
#1

Hello,

I’m trying to get our top bar (logo, search bar, and other info) to all display in one line across the top rather than have it stacked.

https://kannakart.com/

I would like to move the logo to the left side, have the search bar appear in the middle, and keep the other info to the right but have it all on the same level. Some help would be greatly appreciated.

Thanks in advance.

#2

Hi There,

To make your logo and navbar inline go to Theme Options Header and choose inline,

You might have to play with the link spacing in order to make them fit in the same line.

The top bar cannot be moved inline without custom development which would be out of the scope of our support.

My recommendation would be actually to use PRO instead of X.

The header builder of PRO allows you to build super complex headers and you will be able to achieve anything * or almost anything you wish.

If you purchased X before the release of PRO you are entitled to a free upgrade.

Hope it helps!

#3

Hi Joao,

Thanks for the response, started building the header on PRO instead of X.

I’m running into an issue when I make the header live on the site.

On the backend it looks like this:

When I make the header live, it looks like this:

How can I fix this layout issue?

Thanks,

Andrew

#4

Hi there,

That is unusual.

Hey There,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

#6

Yes, just added the note.

#7

Hi There,

Please put all your element in one container, on the SELF FLEX of the container choose the preset Fill Space or Fill Space Equally (https://prnt.sc/g74hpd)

Hope it helps,
Cheers!

#8

Hi friech,

Thanks for the reply. I put all of the elements into one container on both of the bars and tried setting to fill space and fill space equally. Unfortunately, I’m having the same problem and the two bars are still overlapping.

Here is a link to a page that I set the new header on to test: https://kannakart.com/tightvac/

#9

Hello There,

Thanks for updating in! Upon checking, it turns out that you have inserted invalid html in the content area. Please make use of the following code:

<div class="yith-ajaxsearchform-container">
    <form role="search" method="get" id="yith-ajaxsearchform" action="https://kannakart.com/">
        <div class="yith-ajaxsearchform-container">
        
           <div class="yith-ajaxsearchform-select">
                <input type="hidden" name="post_type" class="yit_wcas_post_type" id="yit_wcas_post_type" value="product">
            </div>

            <div class="search-navigation">
                <label class="screen-reader-text" for="yith-s">Search for:</label>
                <input type="search" value="" name="s" id="yith-s" class="yith-s" placeholder="Search for products" data-append-to=".search-navigation" data-loader-icon="https://kannakart.com/wp-content/plugins/yith-woocommerce-ajax-search-premium/assets/images/preloader.gif" data-min-chars="3" autocomplete="off">

                <div class="autocomplete-suggestions" style="position: absolute; display: none; z-index: 9999;"></div>
            </div>

            <input type="submit" id="yith-searchsubmit" value="Search">
            <input type="hidden" name="v" value="757e5b5109ed">
        </div>
    </form>
</div>

<div class="topbarcustom">
    <div style="float: none; width: 100%; margin-left: 150px;">
        <p><a href="https://kannakart.com/blog/">Wiki/Blog</a> • <a href="https://kannakart.com/contact-us/">Contact</a> • <a href="https://kannakart.com/my-account">Register</a> • <a href=" https://kannakart.com/my-account">My Account</a></p>
    </div>
</div>

Hope this helps. Please let us know how it goes.

1 Like
#10

Thank you! All fixed.

#11

You’re welcome.