Docs

[ravenevents]

I would like to have a bar of event links below my main slider & navigation (see screenshot). It has to be mobile responsive.

What’s the best way to build this? With graphics that link to each separate event page? I lose SEO that way, so would prefer a text/css based alternative or even better a custom menu, but I’m not sure that is workable with three lines of text for each event ‘button’.

[Zeshan]

Hi there,

Thanks for writing in!

It’s not possible to add a second custom menu out of the box. However, you can simply add multiple columns and then use Button element in each column. This will give you a similar look to this: http://prntscr.com/au3uc9

Thank you!

[ravenevents]

Hi, thanks. I’ve set that up and created custom styles for the buttons but have an alignment issue (see attached). No matter how I set up those columns, the first 1/7 appears flush left and all the others go right.

I also want them all to be centered in the middle with their fixed widths with no padding above or below.

.x-btn.x-btn-mini-west {
padding: 0.385em 0.923em 0.538em;
font-size: 12px;
width: 175px;
background-color:#f8ce07;
}

[column type=“1/7”][x_button shape=”square” size=”mini-west” float=”left” info=”none” info_place=”top” info_trigger=”hover”]ABM West<br>May 9-11<br>Penticton BC[/x_button][/column][column type=“1/7”][x_button shape=”square” size=”mini-vi” float=”left” info=”none” info_place=”top” info_trigger=”hover”]ABM Vancouver Island<br>Feb 9-11<br>Nanaimo BC[/x_button][/column][column type=“1/7”][x_button shape=”square” size=”mini-nbc” float=”left” info=”none” info_place=”top” info_trigger=”hover”]ABM BC North<br>June 27-29<br>Prince George BC[/x_button][/column][column type=“1/7”][x_button shape=”square” size=”mini-east” float=”left” info=”none” info_place=”top” info_trigger=”hover”]ABM East<br>Nov 7-9<br>Sault Ste. Marie ON[/x_button][/column][column type=“1/7”][x_button shape=”square” size=”mini-atl” float=”left” info=”none” info_place=”top” info_trigger=”hover”]ABM Atlantic<br>Oct. 24-26<br>Membertou NS[/x_button][/column][column type=“1/7”][x_button shape=”square” size=”mini-alb” float=”left” info=”none” info_place=”top” info_trigger=”hover”]ABM Alberta<br>Sept 19-21<br>Enoch AB[/x_button][/column][column type=“1/7”][x_button shape=”square” size=”mini-prairies” float=”left” info=”none” info_place=”top” info_trigger=”hover”]ABM Prairies<br>June 13-15<br>Saskatoon SK[/x_button][/column]

[Lely]

Hi There,

Thanks for the code and the screenshot. To assist you better with this issue, we’ll first need you to provide us with your URL where above code is implemented. 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.

[ravenevents]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! It seems you have used this within a Text element with shortcode. It would have been easier if you place them just as marginless columns and set different background color for them.

However to fix the issue for now, you can use this CSS under page level CSS or Customizer > Custom > CSS :

.home #x-section-3 .x-column.x-sm.x-1-1 {
  display: inline;
}

Hope this helps.

Cheers!

[ravenevents]

Hi – I am using a row with marginless columns. And thanks that got rid of the space!

However, I can’t seem to center the menu in the space and there’s a gap between the menu and the headline above (shown in grey).

I tried -30 top margin but that pushes the grey up into the headline.

Thanks for all the help!

[ravenevents]

Screenshot

[ravenevents]

screenshot resized

[Rupok]

Hi there,

Thanks for updating. You should follow the approach that mentioned above to make them even in width with custom column size.

For the space issue, remove the extra empty paragraph that caused by Enter/Return Key. You can also use this CSS to eliminate the space :

p:empty {
  margin: 0;
}

Hope this helps.

Cheers!

[ravenevents]

Hi – the problem is if I set custom widths and it’s set for a specific screen size, what happens on all other devices? I would rather float it in the center with a background behind… is that possible?

[Rad]

Hi there,

Then other devices will be excluded from the custom width you applied. Columns are floating element, and centering isn’t possible with it. What you could do is wrap your columns with another container, and set the max width for that container and that way, it can be center through automatic margin.

Please change this CSS,

.home #x-section-3 .x-column.x-sm.x-1-1 {
  display: inline;
}

to this

.home #x-section-3 .x-column.x-sm.x-1-1 {
    display: block;
    float: none;
    max-width: calc(175px * 7);
    width: 100%;
    margin: 0 auto;
}

Hope this helps.

[Author]

Posts