Top Bar custom code destroyed when site is autoresponds

Support
#1

Hello,

I implemented little custom code to setup clickable items in the top bar.

  1. My items appear not in line with the social icons right above the main Navbar
  2. When site is resized on small screen the top bar items becom squashed to no recognition.
  3. How to get rid off social from top bar only but keep them in footer area?
  4. Is theere anything can be done to build X theme styled topbar item list horisontally so resizing doesnt affect it.

very appreciated

#2

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#3

Hi there,

Thank you for providing the URL. The top bar section of our theme is a place that you can add the quick snippet of code and as it is a place to add the custom HTML code by you we can not predict the HTML code that will be put there, that is why we tried our best to make the wrapping tag responsive.

Making the code inside the topbar responsive is considered as a customization and it is outside the scope of our support, but we will do our best to guide you through the correct path.

To remove the Social section in the top bar you need to add the CSS code below to X > Launch > Options > CSS:

.x-topbar .x-social-global {
	display: none;
}

As you added the code with the wrapping class of the icon-bar I will use that and the Flexbox display of CSS to achieve a good look:

.icon-bar {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    margin: 25px 0;
}

.x-topbar-inner p {
    margin: 0;
}

.icon-bar a {
    text-align: center;
    float: none;
    transition: all 0.8s ease;
    color: rgb(132, 132, 132);
    font-size: 10px;
    margin: 0 20px;
}

For more information about Flex kindly read this article:

Thank you.

#4

there is an error. should I ignore it?

also when I use autoresponse on resize I can still see that all that elements being clogged . is it custom code we need that outside the scope of this support?. by the way I was not able to remove the social icons. Can I understand where is the topbar. is it where social icons are?

#5

Hi there,

Sorry the code was not correct I fixed that and now you can copy/paste the code. I gave the CSS code to remove the social media icons from the first section of my answer. If it is not working for you can use this code:

.x-topbar .x-social-global {
	display: none !important;
}

Thank you.

#6

all perfect. thanks hips. Too good to be true:)

#7

Glad to hear it :slight_smile:

#8

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