Top Bar alignment issues

Hi,
So there are a few things I would like to change on my top bar and I’m in need you your guys help.

I have a custom top bar using a global block. Currently I have a custom three column (1/2 + 1/6 + 1/3) set up and I’m having trouble getting all my elements to display properly.

  1. I would like to know how I can get all three columns to display next to each other on mobile? I tried following this thread for advice but it didn’t quite help. See here: https://theme.co/apex/forums/topic/2-columns-on-mobile-layout/ It applies to two columns and I have three. Secondly, it applied to my entire site and I only want it to display three columns next to each other in my top bar.

  2. I would like to add a tiny bit of space (5px) between the inline navigation buttons. I have a login and register button that are touching. I tinkered with the elements and css and couldn’t quite figure out how to do that. They are either too far apart or two close together.

  3. I would like to make the with of the top bar container 98% so, I can move the elements from my first and third columns to the edge leaving a little bit of space.

  4. Lastly, I would like to move my element in the middle section (Cart dropdown modal) closer to the login and register buttons I have in my third column.

If you can help me figure this out, I would greatly appreciate it. I am almost done designing and soon I will be out of your hair until my next project.

Thanks in advance.

Hello @quituck,

Thanks for writing in!

1.) That’s not possible because the section is only visible in desktops. In your global block, you have two sections. One section is for the desktops and the other section which consists of 1/3 + 2/3 columns. You must decide which section should display in all screens first before we can add a custom css to make the columns display side by side.

2.) To adjust the spacing for the navigation, please go to X > Theme Options > Headers > Links - Alignment and adjust the “Navigation Top Link Spacing”.

3.) Please edit your global block. In the row settings, display the Inner Container option so that you will have the same width as the content width of the topbar.

4.) The cart modal is contain in the 1/6 column. The Register button is in the 1/3 column. You will need to adjust your column widths or simply insert the cart modal with the buttons so that they will be next to each other.

Hope this helps.

Thank for that. I was able to resolve some of my issues. I still have three problems left to resolve.

  1. I would like to add 1em of spacing between my buttons. They are too close together. How do I add spacing between them?

  2. Adjusting the column widths affects the text I have in my first column. Also, I need extra space for my buttons to stretch out. I’ve tried several combinations of widths and what I have seems to work the best. How can I align the cart right so that is sits closer to the buttons? I want them to be 1em apart.

  3. Lastly, How can I remove the wrap from the three columns so, that all display next to each other on mobile?

Please advice.

Thank you

Hey @quituck,

  • To add spacing between buttons, add the following code in the Theme Options > CSS:
.my-btn-classqb {
    margin-right: 1em
}
  • Move the cart button in your third column to reduce the gap between the buttons

  • By default columns stack in smaller screens, there is no easy way to change the behavior without disturbing the layout. You can move all the items in single column if you need to stop the columns stacking.

Hope this helps!

The buttons are spaced perfectly now.

I tried putting all the elements in one section and that did not look good at all. So, I kept things how they were and hid a section for mobile.

I wish there was an easier way to display columns side by side for certain sections. Please share any ideas if you have them. For now I’m not going to worry about it. I have the top bar designed how I want it to look.

I do have one problem, the drop down navigation is cut off on my mobile device. How do I make the form fit into my mobile screen?

Thank again!

Hi @quituck,

That is happening because of your cart dropdown element has a fixed 350px width, that means even if the screen view is lower than 350px (say iPhone 5 is 320px), the dropdown width will stay at 350px that’s why its getting cut off. To resolve that please add this to your Cart Dropdown Element CSS area.

@media (max-width: 480px) {
	$el .x-dropdown {
		width: auto !important;
	}
}

This will make the dropdown responsive on screens 480px and lower.

Hope it helps,
Cheers!

Hi,
Thank you so much for that I was able to get that to work. However, the pop up was so narrow I had went the the cart off canvas element instead of the cart drop down.

After doing that I ran into one problem when I went to edit my footer global block and what seem to be other pages as well.

Currently, I am no longer able to edit my cornerstone pages. After I click on an element such as the headline element in my footer, my menu options on the left disappear making it so I can’t edit anything. When that happens I refresh my page and they come back but soon as it try to edit the headline my options go away again. I tried clearing my cache and working an incognito. Right now my work is halted because of this error.

What is the cause of this and how can I fix it?

Please advise.

Thank you

Hi @quituck,

I checked the website and this is happening on all pages. This shows that there is a sitewide problem and not a one-off error. Also, it is happening whenever an element contains the section to add text such as the Headline or text element. If you click around Gap elements, for example, the error does not happen.

Would you please kindly think of a step that caused this issue? There must be a step that you took which caused such an unusual problem, and that will help us identify the cause.

At the moment I do not know why this is happening and the only choice I have which I need you to follow other than remembering the step that you took causing the issue is to check the steps below:

  1. Make a complete backup of your website and remove the Global Blocks that you used as the header and footer and see if the page itself work correctly. Maybe there is HTML error or Javascript error in the Global Block, and as you used the Global Block on the pages it causes the issue.
  2. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
  3. Remove custom CSS and Javascript from the options and/or Child Theme and test the case.
  4. Increase the PHP Memory Limit of your server. Click here for more detailed information and how to increase the PHP memory limit.

Thank you.

I’ve only been working on my global blocks.

The only thing I did was add this code:

@media (max-width: 480px) {
$el .x-dropdown {
width: auto !important;
}
I did notice when I added that code, the cart element in my top bar it disappeared. I was unable to make any further edits to the cart element. That led to me changing it because it disappeared from the editor but appeared on the front end. That is another reason why I changed the cart style from drop down. Is it possible that code it still on the site and causing issues?

This is an image from the top bar I was working on before this problem.

Hey @quituck,

I don’t see the code added to the Cart Dropdown in the Global Block. All elements you’ve not deleted will still be available in the builder. You can enable the Skeleton Mode to see them.

Since you changed the Cart Dropdown to Cart Off Canvas, does this mean that we’re good here now? If not, please set the Cart Dropdown again in mobile view so we could see the issue.

Thanks.

No because I can’t make any edit to my site because of this. Why is my cornerstone malfunctioning and how can I quickly resolve this?

Hi @quituck,

Would you mind being more specific and mention what functions in Cornerstone that are malfunctioning on your end?

I just tried to edit the Topbar global block and it is loading correctly on my end. Perhaps, try clearing your site and browser cache then check your site again.

Let us know how it goes.

Currently, I am no longer able to edit my cornerstone pages. After I click on an element such as the headline element in my footer, my menu options on the left disappear making it so I can’t edit anything. When that happens I refresh my page and they come back but soon as it try to edit the headline my options go away again. I tried clearing my cache and working an incognito. Right now my work is halted because of this error.

This issue affects all of my pages. Yes I can add elements but when I go to edit any text it malfunctions.

I increased my php memory, I tested for plugin conflicts, I removed my Css and JS code and the problem still persists. Also, I updated everything on my site.

I’m not sure why this is happening. But I can’t edit any of my pages.

Hey @quituck,

I’ve saved your Footer Global Block as a template and loaded it to my test site and the issue persists there. That specific global block was corrupted most probably by insertion of an invalid character. The only solution to this is to delete the broken Text elements and they are the schedule and the copyright (see screencast in the secure note).

The broken Footer Global Block might be the one causing the issue in your pages so please remove it from your site temporarily and try editing your pages.

Thanks.

Thank for that, I really appreciate your help. I deleted those elements from my footer and the problem is still there.

I was able to add elements to my footer but not edit them. Have you looking into my other pages? I tested my main pages and I have this problem every time I try to edit the text elements anywhere on my site.

In addition, the elements I deleted from my footer were there for a few weeks and never was a problem before. I also can’t add them back because I can’t edit my footer section or any other page on my site without my style menu disappearing when I try to edit the text. This is a huge problem that is slowing down the completion of my project.

Any other ideas what’s causing this issue?

Like I said earlier, I haven’t make any recent changes to the site before cornerstone started malfunctioning. After I sorted my top bar issue above, I began to work on my footer. I only added a section for my tagline then cornerstone started malfunctioning. I don’t have any explanation for this problem. Everything was working fine. I didn’t change or add any code to the site other than provided above which, I removed.

How can I quickly resolve this? What do you think I should do? Is there a bug?

Remember my message earlier, I ran a bunch of test and I found nothing.

Thanks again.

Hi @quituck,

We understand that this is frustrating, and we are also doing our best here to find the problem cause. At the moment, we rule out any core code bug case, as this is not happening in our installation, and there is no other customer reporting such behavior. So, this is an isolated issue on your installation, which we are trying to find the cause.

On my last reply, I asked you to follow the steps I mentioned, but there was no indication from you that you followed up. From what I see, you tested for the plugin conflict, CSS, and memory limit. But what about removing the Global Block?

What I have in mind is that the insertion of Global Block in all pages cause the pages to have the same problem. If you backup your website completely, or create a staging version of your website, you can remove all the global blocks and then check the case.

We can not do this test as it is a live website. We will wait for your feedback on that test to see if that was the problem cause.

Thank you.

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