Images/Columns Stacking/Collapsing -...

User 122279 Photo


Senior Advisor
14,563 posts

Well, I got some minutes and added text links to my previous suggestion. See if you can figure out the styling. ;)
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 461879 Photo


Registered User
82 posts

Here is the file. I text links on top and bottom seem to slide over each other at smaller screen sizes even though they are in different subgrid columns
Attachments:
User 461879 Photo


Registered User
82 posts

I should mention this is a new design/template. Not what is online right now
User 461879 Photo


Registered User
82 posts

Thanks Inger I will play with that. I sure wish this program allowed for copy and paste from one project to another.
User 122279 Photo


Senior Advisor
14,563 posts

If you give the longest word in your navigation 5 spans instead of 4, and reduce the font size a bit at the last breakpoint, you can move right down to 230px wide before those text links start bouncing into each other. Or, if you change Reservations to Bookings, to have a shorter word, you can stay with the 4 spans.

I see that you have used a subgrid and subcolumns to position the menu. It is kind of complex. Check out what I did. I used a container, but I popped the text links directly into that container, and the positioning was done with the 'push' feature that you find in the layout tab.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 461879 Photo


Registered User
82 posts

Thanks Inger, That helped and I was able to do what you did in your example.
One of the reasons I used a subgrid is because when the text links are in just a container they look like so at full screen

Home Reservations Contact

When I go down in screen size the links flip and look like so

Contact Reservations Home

Which I dont understand. May be picky but would prefer if they stayed in same order as in full screen.

Any thoughts? I have no clue why they flip order.

And thanks again a lot...You have been a great help the last few days. Sometimes you just need some simple explanations and it all comes together.
User 122279 Photo


Senior Advisor
14,563 posts

I will look into that changing of the order tomorrow. Now it's midnight where I am.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 461879 Photo


Registered User
82 posts

Thanks Inger Goodnight
User 122279 Photo


Senior Advisor
14,563 posts

I have messed with it again, and here are two suggestions, one where I used the container but no subgrid, the other one with a subgrid but no container. They both work.

I think the reversing of the order came from me not clearing the float correctly. I didn't discover it because I had left the buttons with the same text.
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 461879 Photo


Registered User
82 posts

Thanks Inger, was busy the last couple days. I will take a look at these.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.