Sub Nav Missing or Poping out of Frame on Mobile

Support
#1

https://dev.alliancepropertysystems.com

Sometimes the 3 dots don’t open in chrome or safari and also when it does open the 2nd level pops out of view how can this be resolved?

#2

Hi @verobeachmarketing,

Thank you for reaching out to us. That’s happening because you’re hiding the Navigation Inline element only and not the actual Bar in small devices. To fix this, hide the Bar instead that contains the Navigation Inline element and this should resolve the menu not opening issue.

To resolve the 2nd level of the menu issue, I’d recommend you to use Navigation Collapsed element instead of Navigation Dropdown element.

Hope this helps!

#3

Thank you for those suggestions. They worked great.

Can you tell me how to get the navigation to stop overlaying the page titles?

Can you tell me how to add padding or margin to the 4 boxes on the homepage on the bottom?

#4

Hello @verobeachmarketing,

Thanks for updating the thread. :slight_smile:

I checked the website and I am unable to replicate. Can you please share a screenshot so we can understand the situation better?

I believe you are referring to the section that has Maps. Please correct me if I misinterpreted. I see you are using footer builder to design the layout. Please inspect the bar that’s holding maps and other elements. In that please adjust Top and Bottom padding values.

Thanks.

#5

Basically on mobile all page titles are being cut off but the header bar.

#6

There is a 2em padding on each box already.

#7

The text links info in footer have icons like the mailing address and indentation. The map is fine. I would like this info indent the same or treated the same as mailing info and to be inline together with same indentation.

#8

Hello @verobeachmarketing,

Please inspect the gray bar on the header. Under Setup Tab > Initial Position > Choose relative.

Do you mean to add spaces between those boxes on mobile view?
First, padding are spaces added inside the element not outside. To add space we need to add bottom margin on each column. To do that, please inspect the section with thouse columns. Go to Customize Tab > Element CSS add the following:

@media (max-width: 767px){
$el.x-section .x-column.x-1-4 {
    margin-bottom: 2em; /*Change this to your preferred spacing*/
}
}

Please inspect the GLOBAL BLOCKS element. Click the container with that element. Max- width is set to be 3000. Is that intended or just 300px?. Then inspect the feature list element. Please add value on maximum width setting.

If you do have other questions, a different one, it would be best to open a new thread. Then for faster investigation, it is always recommended to share the exact URL together with screenshot.

Hope this helps.

#9

I pout the…

@media (max-width: 767px){
$el.x-section .x-column.x-1-4 {
margin-bottom: 2em; /Change this to your preferred spacing/
}
}

But it did not work. I did it on each box and the section.

The grey bar, initial relative did work but now the feature photos on those pages also have spacing above them making a white bar between them and the grey menu area.

How can I get the two information boxes to align their icons phone address and mailing address etc?

#10

Hi @verobeachmarketing,

I have double check it on the frontend. You have added it 5 times on the wrong elements. Please remove it on each columns and row elements. It should be added on SECTION > CUSTOMIZE tab > ELEMENT CSS . Not row and definitly not columns. The CSS basically looking for 1/4 columns child of the section. That’s why it should be added on SECTION only.

The white bar is a 40px top and bottom margin of the default page template. Please try to use NO CONTAINER page template instead

Add class to your feature list. Inspect feature list element and then on Class field at the bottom, add something like this: footer-fl.
Then on that global block custom CSS, add the following CSS:

.footer-fl .x-feature-box-graphic i:before {
    top: 17px; /*Adjust this value accordingly*/
}

Hope this helps.

#11

If you use Blank No Header No Footer the feature image goes away.

#12

Even-though I use tel:9544734733 in the feature list as link text the phone number is not clickable on mobile. I would also like to make that text white and not blue. Same with the header phone number color, although it is clickable.

#13

Hello @verobeachmarketing,

Thanks for updating in!

1.) If you use Blank No Header No Footer the feature image goes away.

  • Yes, the featured image will go away because by default, the Blank - Container or Blank - No Container page templates will not display the page title and the featured image of the page.

2.) Even-though I use tel:9544734733 in the feature list as link text the phone number is not clickable on mobile. I would also like to make that text white and not blue. Same with the header phone number color, although it is clickable.

  • When using the link of the feature box for your phone, please do the following instead:

    • The “Title and Content” should on have  

  • And then add the phone number in the link field instead.

Hope this helps.

#14

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