Navigation, Mega Menu, Image Banner, Custom and Pricing Table

[Raabe-Verlag]

Hi,

Let me first start off by saying that uplift is one of the best themes I’ve ever worked with. I do have a few questions though and I hope you will be able to help ASAP as we are closing in on our launch date. Thanks in advance.

Here is the link to the site as a reference
asc.afataya.com
(Keep in mind that all content including images is currently still just placeholder content. Text and images will be replaced and licensed accordingly.

1- Line Height Problem with Button Style Menu Item
When one top level menu item is activated to be styled as a button “Button style menu item”, the button text does not get vertically centered within the button but rather sits about 100 pixels further down. The line heights seems to be a problem. Can you please advise?

2- Button Style Menu Item on Mobile
Can the button style menu item be activated for mobile devices as well?

3- Centered Mega Menu
I plan on using header layout number 4 and have all my navigation points aligned right. The problem is though that I can’t manage to center my mega menu. It only works if I choose header layout number 3 where the menu items are all centered. But what I would like to do is have the logo on the left, my navigation items on the right, and on hover I would like my mega menu to be centered on the page. Can you please help out?

3- Deactivate Rounded edges on Image Banners
When images are added you provide the option of disabling round edges. Image Banners on the other hand do not offer that functionality. Is there any way to remove the edges on images Banners?

5- Mobile Sticky Header
When Mobile sticky header is activated jumping to set anchor points on the same page doesn’t work as good. The height of the header is not calculated and you end up jumping to a part in the page where the headline of the section gets overplayed by the sticky header.

6- Custom SVG-Icons (Icon Box Grid and Icon Box)
Is there a way of embedding our own SVG-Icons via Swift builder?

7- Popular Tag on Price Tables.
The site is meant to be in German. Is there a way to change the word “Popular” in a highlighted price table column?

Thank you.

Kind regards
Ahmad

[David Martin – Support]

1) Please add this to Theme Options => Custom CSS:

a.nucleo-icon-cloud-download.sf-button.rounded.accent.mega-menu-link {
    line-height: 52px !important;
}

2) Yes, maybe a little custom CSS will be needed also. Start by adding the class sf-button rounded accent to the mobile menu link item in Appearance => Menus

3) Have you set you Mega Menu to fullwidth or natural width?

4) Please add this to Theme Options => Custom CSS:

.sf-image-banner figure.animated-overlay {
    border-radius: 0;
}

5) What page URL can I replicate this on?

6) Sure, please install and activate the supplied child theme, inside the child theme functions.php file you will find the function for this that will be commented out. Uncomment the code and update the file names to your SVG’s. Add the SVG’s to your child theme folder also.

7) Sure, you need to translate the plugin Swift Framework. Inside the .pot file search for “Popular”. Save the .po file and re-compile the .mo file, upload both to wp-content/languages

[Raabe-Verlag]

Perfect! Thanks David.

1,2,4,6 and 7 have been resolved.

3) Have you set you Mega Menu to fullwidth or natural width?

Not sure where i can set the mega menu to be full or natural width. Any changes i do under Mega Menu/ Menu Themes / Mega Menus doesn’t seem to have any effect on my menu even though I’m editing the active menu theme.

5) What page URL can I replicate this on?

http://asc.afataya.com/impressum-datenschutz/#two

Thanks!

[David Martin – Support]

Glad to help.

3) My login credentials supplied do not have enough admin privileges to take look. Please amend to full administrator rights.

5) What device is this for, logged in or out also? I am testing on an iPad emulator (landscape/logged in) and it works nicely.

Thanks.

[Raabe-Verlag]

Hi David,

3) sorry, my bad. I fixed the credentials.

5) I’m testing using chrome inspect and samsung s7. Once u click on the side bar using inspect (testing also with iPad) or load the link on a mobile device, the site loads at the right section, but the headline gets overlapped and you just see the text part. – see attached screen.

Thanks

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

3) The mega menu can only be as wide as the items within. A 4 column layout, would be wider for example.

5) Ah yes, I see. When logged out this happens and when logged in it’s ok. If you add your FTP details, I’ll sort that and get a patch released for this.

Thanks.

[Raabe-Verlag]

This reply has been marked as private.

[David Martin – Support]

3) Please add this to Theme Options => Custom CSS:

#header li.mega-menu-item > ul {
    margin-left: auto !important;
    margin-right: auto !important;
}

li.mega-align-bottom-right > ul.mega-sub-menu {
    right: auto !important;
    left: -50% !important;
}

[Raabe-Verlag]

Hi David,

that did not solve the problem unfortunatley.
I increased the 50% to 95% so that the sub menu is now in the visible part of the page.
That only works on a resolution 1800px and wider. Anything below that the submenu gets scaled down and starts floating on the left side of the page – see attached image.

If we can’t solve it this way, is there a chance to triger a full page overlay menu from a menu item with 2 built in text widgets instead of dropdown submenu – see rough sketch attached
I couldn’t find any documentation regarding the menu types nor was it visible in any of the demos (except for the hamburger 1/4 slide out)

Thanks!

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

in that case it will be necessary to provide different percentage values according to the resolutions.
You can adjust the breakpoints on those rules, add a few more, remove any.

@media only screen and (max-width: 1800px){
  /* This will work between 1400 and 1800*/
  li.mega-align-bottom-right > ul.mega-sub-menu {
      right: auto !important;
      left: -50% !important;
  }

}

@media only screen and (max-width: 1400px){
/* This will work between 1024 and 1399*/
  li.mega-align-bottom-right > ul.mega-sub-menu {
      right: auto !important;
      left: -50% !important;
  }
}

@media only screen and (max-width: 1024px){
/* This will work between 0 and 1024*/
  li.mega-align-bottom-right > ul.mega-sub-menu {
      right: auto !important;
      left: -50% !important;
  }
}

-Rui

[Raabe-Verlag]

Thank you for the help.
All problems resolved.

[David Martin – Support]

Marking as resolved.

If you have found the theme/support useful, we appreciate it if you can leave feedback on our item if you have the time as it really helps us out.

Thanks.