Swift header questions

Scott Forsyth

Posted on 06/09/2021 16:28:53

Hello,

I'm kicking the tires on Swift 1.0, trying to bring over an existing site that is meant to look almost identical to the original.

Here's the site that I'm working on: swift-ccen.mydwsite1.com (copying from corvettecentral.com). (I'm only about 3 hours into learning and doing this so go easy on me)

Overall, Swift is really impressive. I'm looking forward to more documentation like Rapido had so that I don't have to figure as much out myself, but I'm getting a general feel for it now.

I have some questions that are hopefully pretty quick:

The icon for the mega menu shows multiple columns . However, so far it appears that this is just one long single column (example under C1(53-62)). Did I do something wrong or is that coming later?
Is there a way (without customization) to have hover work over the top nav rather than just a click? I realize that a mobile devices needs to click, but I would expect it to support both: a hover for desktop and a click also opens it for mobile.
The sticky header functionality is great. I really like that how works. However, is there a way or plans to support swapping out a row to something else when it sticks (like the site I'm copying from) so that it could do something like show a burger menu and search bar when scrolling down. I realize this is a more advanced feature request so it's ok if it's not supported in 1.0.
Is it possible to use multiple brands at a time? I would like to have one font for parts of the header and another font for the rest of the site. It appears that brand is all or nothing on the site.
A text paragraph applies a max-w-75ch, even for a 1-column row. Is that on purpose or a bug?

Thanks!

Scott

Replies

Nicolai Pedersen

Posted on 06/09/2021 18:48:35

This post has been marked as an answer

Hi Scott

It is already starting to look great, so well done!

@1: I think this is how we have currently implemented it. If you only have 1 level the template automatically goes to regular dropdown - not until you have more levels will go mega menu. I added one sub item on level 3, and now it has gone to be mega menu. But not as you expect it. Mega menu in Swift is a "Group" (level 2 items) and its children (level 3items). If an item on level 2 does not have child items, it uses it self as sub item. So with your structure you just see something weird.

@2: No, not yet. But it is a very simple customisation - adding this css to a custom css that you can add to the project with no coding, will do the trick:

@media all and (min-width: 992px) {
 .megamenu-wrapper .nav-item .dropdown-menu { display: none; }
 .megamenu-wrapper .nav-item:hover .nav-link {   }
 .megamenu-wrapper .nav-item:hover .dropdown-menu { display: block; }
 .megamenu-wrapper .nav-item .dropdown-menu { margin-top:2px; left: 0; }
}

The reason for having onclick and not hover is due to touch as you have figured - i.e. my laptop is touch, so dropdown on hover is no longer a recommended approach.

@3: You can show or hide on scroll. We could probably add one more option so a row appear on scroll. Do not think that would be a big task.

@4: Not sure I understand the question. The brand is sitewise - but headers and body content can have different fonts. You want font 1 for navigation and font 2 for body content?

Currently that is not possible without a bit of customisation:

header {
font-family:verdana;
}

We have currently made this limitation to keep things simple and to not make the website slow. 1 font=fast, 2 fonts = slower, 3 fonts = conversions go down....

@5: Yes, that is on purpose and can currently not be avoided. This has to do with accesibility and readability. I see the need for being able to circumvent that particular thing.

You can disable it sitewise by adding this to your custom css:

.max-w-75ch {
    max-width: none;
}

To add custom css, go to website settings and choose the CustomHeaderIncludeExample.cshtml template in the "Custom header include" field. This is a template that is executed in the head of the master template and is greate for customisations. Change the internals of that to include a custom css that you create with the above things in them.

I just made this setup for you on this site to get you going.

BR Nicolai

Votes for this answer: 1

Scott Forsyth

Posted on 07/09/2021 03:39:05

Hi Nicolai.

Thanks, that was all very helpful.

#1 The sub-folder was the key. You pointed me in the right direction so I simply commented out the part of the code that displays the subfolders if there isn't a subfolder. I'm not sure what the intent of that was but it's working now with it commented out.

#2 Thanks. Your edit seems to address both mouse/hover and touch.

#3 "We could probably add one more option so a row appears on scroll.". Yes, that would be perfect.

#4 I see. That's a tricky balance between protecting people from themselves and flexibility. Your suggested css override was easy enough, and I decided to leave it as you recommended with just one font for now anyway. I'll see if the project owners prefer that.

#5 Interesting. Your suggested fixed took care of that well.

It was helpful to see the custom header include usage in action too.

Thanks again.

Scott

Nicolai Pedersen

Posted on 07/09/2021 09:26:07

@1: We just discussed this this morning and will look into handling scenarios like this. We will probably add more logic to "auto" mode and make it possible to control on each pages properties how the dropdown should behave (megamenu or not). On this site your menu for home looks not that nice. It seems like the sub pages you created are also going to be ecommerce groups at some point, so it might change things again?

@2: Hover dropdowns will be added - either as a opt-in option or as default behavior.

@4: I really think a specific header font should be avoided because of performance considerations... But we will see if we have to add this option at some point.

@5: We also discussed this and even though it might be 'correct' we can also see it causes issues already, so we are probably removing it.

Thank you for the feedback on this - these first real life scenarios are helpful to get things settled!

BR Nicolai

Nicolai Pedersen

Posted on 07/09/2021 09:44:48

@5: We just tested removing this - and it is not good for most content. So we will try a version where we keep it, but gives an option to disable the 75ch max width

Scott Forsyth

Posted on 07/09/2021 15:29:02

Hi Nicolai,

Good deal. Thanks for considering all of this. It was a good exercise for me to step through it too.

@1: That makes sense. Yes, it would be good to handle those various situations. As you said, the home menu with just 3 choices, and a products submenu needs to be accounted for too.

@2: That sounds great.

@4: I fully agree about wanting to keep a single font, but thanks for also considering the flexibility for when we have to conform to some pre-determined designs.

@5: That makes sense. I won't be going live with my current version so I'll have time to refresh with an upcoming version of Swift and pick up whatever is decided.

Thanks,

Scott

You must be logged in to post in the forum

Developer forum

Swift header questions

Replies