Inline Navigation samples from the Elements Demo page

[kbistudio]

I have two questions.

1. I’m having trouble finding the options or tools and skills to build a menu as seen here (specifically the “pill” menu with similar dropdown and styling):

.

2. I’d like to build this menu inside a header on the home page, but then also use that same menu throughout the rest of the site, but I can’t seem to find how to do that. If I used the default menu (icon), it would disappear if the page is a static home page.

Can you walk me through this process and help me reach my end goal?

[prakash_s]

Hello @kbistudio,

Thanks for writing to us.

You need to create a custom Header and then insert Navigation Inline.

1. In case you want to set the background color for the menu item then set the background from the Top Link.

You may change the background color for the hover as well. To set the hover color you need to click on Interaction. Please have a look at the given screenshot below.

2. In case you want to set the border of the menu items you need to go to the Navigation Inline —>Top Links —>Border

In case you have not seen our doc of Navigation Inline please have a look at it

Navigation Inline | Themeco Docs

To set the Header for all the pages you need to assign the custom Header for the Entire site.

Hope it helps
Thanks

[kbistudio]

So I have all that information. I can create a custom header and I can create an inline menu just fine. That’s all good. But then what? That’s where I’m stuck.

1. I don’t see how to utilize that new inline navigation menu (just the menu, not the hero image included in my header) on my other pages.

2. The documentation looks like there’s a simple way to assign headers to specific pages, but those settings appear to be missing or I’m not understanding exactly where they are located.

3. I also don’t see how to stylize the drop down (change fonts, make it align better with the main menu, add particle, etc.). I see the settings, but they don’t behave as intuitively as I anticipated. There seems to be a specific order to changing these settings and sub settings I’m not fully understanding.

Hopefully, that makes sense. Thank you.

[kbistudio]

To take a step back, I tried importing demo content (Mike & Jess) and I cannot get the menu to show up on the home page (as it is on the demo). But if I go directly to the other pages created by the template, they have the menu.

So the question is how can I get the same inline menu consistently on all of my pages?

[prakash_s]

Hello @kbistudio,

Please post one query at a time to avoid confusion. In order to assign the custom Header layout, I would suggest you go to your custom Header —>Click on the Settings Icon—>Assignment —>Condition.

For the entire site

To set the custom Header for page specific

Please have a look at our condition and assignment doc to learn more about how to assign the custom Header.

Conditions and Assignments | Themeco Docs

Hope it helps
Thanks

[kbistudio]

Ok. I’m slowly making progress. Thank you for your help and patience.

I have a couple more questions.

1. Is there a way to remove the drop shadow from the top so it looks like it’s coming out from under the header menu (circled in red)?

2. Can I shorten the span of the drop down so there’s not so much empty space (red arrow)?

3. And sometimes, the drop down doesn’t come out right under and aligned to the right. Is that adjusted with the margin, padding, or some other setting?

Thank you!

[ruenel]

Hello @kbistudio,

1.) You can remove the box shadow property in the Dropdown Design Option.

2.) Just adjust the Width in the Dropdown > Setup option.

3.) The dropdown will be align to the parent menu item.

Best Regards.

[kbistudio]

Thank you! I’m starting to feel like I’m getting the hang of it now.

But I’m still having an alignment issue.

Vs.

The second one (volunteer) isn’t left-aligned, like the first one (services). Please advise.

Thank you!

[kbistudio]

Nevermind. I figured it out! It’s too close to the right edge. I gave the whole menu some padding on the right side and that took care of the problem. Last question about the drop down menu.

1. The animation fades in and comes up. Is there a way to reverse that so it slides down?

2. Next issue is the transition to a mobile menu. Could you walk me through those steps? I need some more specifics than what’s in the documentation.

[tristup]

Hi @kbistudio,

You can change the dropdown animation from the Navigation Inline > Dropdown > Setup > Transition as shown in the given screenshot.

You can find the same option in the Mobile menu. If that is not the case, please elaborate on it a bit or specify the exact question you have.

Thanks

[kbistudio]

To clarify:

1. Is there documentation on what each of those transition terms mean? As I go through each and change them, I don’t notice enough of a difference to see what’s happening.

2. How do I access the mobile functions and make the necessary changes to the menu without undermining the desktop version? I tried the sizing icons on the side (just below the Add Elements button), which I can change the view of different screen sizes. But any change overwrites it everywhere.

I want to change the menu to a collapsed, off canvas, mobile menu when it gets small enough to cut off desktop menu items. I’d also like to change out the logo (standard horizontal logo on desktop changed for vertical stacked version on mobile). What steps am I missing to do that?

[prakash_s]

Hello @kbistudio,

For query number 1

Regretfully there is documentation of the transition but you may check this article to learn more about transitions.

CSS Transitions

For query number 2

In order to edit the custom Header layout for the mobile screen I would suggest you please click on the Mobile icon. Please have a look at the given screenshot below.

In case you have not seen our doc please have a look at it to learn more about how to style the header for small devices.

Responsive Styling | Themeco Docs

You need to show/hide the custom Header Bar as per screen size, I would suggest you please have a look at our doc to learn more about how to show/hide content as per screen size.

Hide or Show Content by Device Size | Themeco Docs

Hope it helps
Thanks

[kbistudio]

Thank you! How to hide elements at specific breaking points was the documentation I needed!

Ok. This hopefully will be my last question on menu:

1. Where can I change fonts, colors, overlay behavior specifically for links in the dropdown menu?

2. Can I add a divider line in between menu items on the dropdown menu?

[prakash_s]

Hello @kbistudio,

For query number one 1

In order to change the sub-menu color go to the Navigation Inline —>Dropdown —>Sub links—>Primary —>Color.

Navigation Inline —>Dropdown —>Sub links—>Primary —>Font.

For query number one 2

To add the divider between the submenu items I would suggest you add the border.
Navigation Inline —>Dropdown —> Sub Links —>Design—>Border.
Please have a look at the given screenshot below.

Hope it helps
Thanks