Question

Icons and Buttons Clipping causing them to not work

  • 14 October 2021
  • 4 replies
  • 23 views

https://www.carronlodge.com/

 

My Social media links and menu buttons, I think because they are in the same column they are clipping with each other. with the use of the z-index I was able to get the Trade log in button work but nothing else. ? I have tried masking them and nothing seems to work. 

 

Any Ideas? 


4 replies

Userlevel 5
Badge +1

Mike, there seems to be a great deal happening on your home page… and I haven’t even scrolled away from the top. Loads of what seems like empty columns, z-indexing, large negative margins...

It needs to be simplified, IMHO, particularly from a user experience perspective. 

Hi Simon, Thanks for commenting. 

 

Is there a better way than using buttons for navigation? the problem I was having is adding 4 buttons in one column and using the margins to move the buttons into the relevant place. my company is not willing to buy the pro version either. 

 

regards 

 

Mike     

Userlevel 5
Badge +1

You don’t need Pro to do that. Here’s what you do:

  1. Create a 1-column section (using the + sign in the editor page).
  2. Drag the widgets you need in the same column you created; yes, they will stack stack up, as they each take 100% of the width.
  3. Then for each widget, go to the Advanced tab, go down to Positioning and change the width to Inline (auto); you’ll then see them line up side by side.
  4. Click on the top-left of the same column to edit column. 
  5. Under Layout, set Horizontal Alignment to Space Between.
  6. Then whichever widget is in the middle, you can use the left or right margin setting to move it closer to the widget on the left or the right.

Hope that helps.

Amazing thank you for your help I will give this a go this afternoon :) 

 

 

Reply