# create navigation menu

**URL:** <https://community.hubspot.com/t/create-navigation-menu/99518>\
**Category:** Blog, Website & Page Publishing\
**Created:** [February 6, 2024, 12:28am UTC](https://community.hubspot.com/t/create-navigation-menu/99518 "2024-02-06T00:28:12Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![grega](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grega/32/81360_2.png) [@grega](https://community.hubspot.com/u/grega)\
**Post date:** [February 6, 2024, 12:28am UTC](https://community.hubspot.com/t/create-navigation-menu/99518/1 "2024-02-06T00:28:12Z")

</div>

I really need some help creating a menu bar on my home page. The information in Hubspot’s knowledge base does not give me enough information to create a new menu bar. I have a menu but it is not a bar across the page header like I want. It looks like this:

Can you give me some help to make a new menu bar?

Thanks

---

<div class="post-metadata">

**Author:** ![jnix284](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jnix284/32/29_2.png) [@jnix284](https://community.hubspot.com/u/jnix284)\
**Post date:** [February 6, 2024, 2:04am UTC](https://community.hubspot.com/t/create-navigation-menu/99518/2 "2024-02-06T02:04:41Z")

</div>

@grega how you can create a menu on you website will vary greatly by the theme you’re using.

Are you using a theme from the marketplace? a custom theme? or perhaps the “old” custom coded templates?

Any other information about the header module you can share would be helpful.

---

<div class="post-metadata">

**Author:** ![grega](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grega/32/81360_2.png) [@grega](https://community.hubspot.com/u/grega)\
**Post date:** [February 6, 2024, 2:28pm UTC](https://community.hubspot.com/t/create-navigation-menu/99518/3 "2024-02-06T14:28:11Z")

</div>

I’m using an “old” theme that was used when the site was developed in 2017 - years before I has hired for the company. Is there a way I can customize the code for the theme to get the desired menu that I want?

---

<div class="post-metadata">

**Author:** ![jnix284](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jnix284/32/29_2.png) [@jnix284](https://community.hubspot.com/u/jnix284)\
**Post date:** [February 6, 2024, 2:37pm UTC](https://community.hubspot.com/t/create-navigation-menu/99518/4 "2024-02-06T14:37:15Z")

</div>

@grega this likely means you’re going to have to edit the templates via Design Tools.

When you have the live page open, if you click on the HubSpot sprocket menu, you can choose “Edit Template File”

 ![Jnix284_0-1707230154468.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/6/2/6270bd56fbf2e0eae8340ee002385ca77b89dcbd.png)

This will open the corresponding template.

From there, open the header module at the top - if you can share a screenshot of how it’s configured, I’d be happy to point you in the right direction for updating your menu.

Also, your original post didn’t have a screenshot of what it looks like currently, that would help connect the dots with the code.

---

<div class="post-metadata">

**Author:** ![grega](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grega/32/81360_2.png) [@grega](https://community.hubspot.com/u/grega)\
**Post date:** [February 6, 2024, 3:14pm UTC](https://community.hubspot.com/t/create-navigation-menu/99518/5 "2024-02-06T15:14:11Z")

</div>

Thank you VERY much for helping me with this! I REALLY appreciate it!!! Here’s the screen shot you requested.  
[Screenshot 2024-02-06 at 9.08.05 AM.png]  
This is what the preview of the page looks like:  
[Screenshot 2024-02-06 at 9.13.20 AM.png]

---

<div class="post-metadata">

**Author:** ![jnix284](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jnix284/32/29_2.png) [@jnix284](https://community.hubspot.com/u/jnix284)\
**Post date:** [February 6, 2024, 3:30pm UTC](https://community.hubspot.com/t/create-navigation-menu/99518/6 "2024-02-06T15:30:38Z")

</div>

You’re welcome @grega - unfortunately I can’t see the screenshots, your message looks like this:

 ![Jnix284_0-1707233414340.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/4/8/48a1cf69ead84e00aac7b6a55cb7be7d9d51e872.png)

---

<div class="post-metadata">

**Author:** ![grega](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grega/32/81360_2.png) [@grega](https://community.hubspot.com/u/grega)\
**Post date:** [February 6, 2024, 3:39pm UTC](https://community.hubspot.com/t/create-navigation-menu/99518/7 "2024-02-06T15:39:11Z")

</div>

Try these:  
[Screenshot .jpeg]  
[Screenshot 2.jpeg]

---

<div class="post-metadata">

**Author:** ![jnix284](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jnix284/32/29_2.png) [@jnix284](https://community.hubspot.com/u/jnix284)\
**Post date:** [February 6, 2024, 3:44pm UTC](https://community.hubspot.com/t/create-navigation-menu/99518/8 "2024-02-06T15:44:59Z")

</div>

@grega so strange…can you see them in the thread? and can you see mine?

 ![Jnix284_0-1707234262309.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/f/fbbcbf80a3d0ad552d1439b044324e32cac75a12.png)

---

<div class="post-metadata">

**Author:** ![grega](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grega/32/81360_2.png) [@grega](https://community.hubspot.com/u/grega)\
**Post date:** [February 6, 2024, 3:48pm UTC](https://community.hubspot.com/t/create-navigation-menu/99518/9 "2024-02-06T15:48:11Z")

</div>

I can not see them in your reply. Is there another way I can get them to you?

---

<div class="post-metadata">

**Author:** ![jnix284](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jnix284/32/29_2.png) [@jnix284](https://community.hubspot.com/u/jnix284)\
**Post date:** [February 6, 2024, 3:51pm UTC](https://community.hubspot.com/t/create-navigation-menu/99518/10 "2024-02-06T15:51:00Z")

</div>

@grega that’s strange - will check with the community team if it’s an issue for everyone.

If you can send me a private message, we can connect over email to see if we can get this updated.

---

<div class="post-metadata">

**Author:** ![grega](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grega/32/81360_2.png) [@grega](https://community.hubspot.com/u/grega)\
**Post date:** [February 6, 2024, 4:02pm UTC](https://community.hubspot.com/t/create-navigation-menu/99518/11 "2024-02-06T16:02:11Z")

</div>

[Transfer - Dropbox](https://www.dropbox.com/t/2SddB3eegh4iyRHH)\<\>

---

<div class="post-metadata">

**Author:** ![jnix284](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jnix284/32/29_2.png) [@jnix284](https://community.hubspot.com/u/jnix284)\
**Post date:** [February 6, 2024, 4:35pm UTC](https://community.hubspot.com/t/create-navigation-menu/99518/12 "2024-02-06T16:35:43Z")

</div>

Thanks @grega, looking at how your website menu is currently configured (as a burger menu) and how you want it (a top bar) and looking at how the header is configured, this would require several hours of coding to update and isn’t an easy fix that I can help make through the community.

There are two options - you could hire a developer to help update the code, I recommend @Anton (he’s an amazing developer and can do it much quicker than I could)  
or consider migrating your website to a new theme rather than trying to update the old coded templates. There are quite a few options for themes in the marketplace, so it doesn’t have to be custom developed, and you’d be able to take advantage of all the CMS has to offer - being able to make website updates via drag-and-drop rather than editing coded templates.

If you decide to migrate to a theme, I’d be happy to jump on a call to go through the steps you’d need to take and share insights about selecting a theme, etc.

I’m sorry I couldn’t be of more help - especially after all the trouble with the screenshots!

---

<div class="post-metadata">

**Author:** ![grega](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grega/32/81360_2.png) [@grega](https://community.hubspot.com/u/grega)\
**Post date:** [February 6, 2024, 6:51pm UTC](https://community.hubspot.com/t/create-navigation-menu/99518/13 "2024-02-06T18:51:11Z")

</div>

One more question?  
Is possible to take a theme and just use the homepage of that theme? To clarify, I have chosen a theme and want to swap the home page of that theme to replace my current homepage.

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [February 6, 2024, 8:09pm UTC](https://community.hubspot.com/t/create-navigation-menu/99518/14 "2024-02-06T20:09:41Z")

</div>

Hi @grega,

while you technically can use just the home (or any other template) of a theme to create a new page while your other websites stay in the old template pack I highly advice you not to go this route since it will get very messy really quick.  
There’s a tutorial on how to [extend old templates with theme functionality](https://developers.hubspot.com/docs/cms/guides/add-theme-features-to-existing-sites) but if your template is from 2017 I’d recommend considering to plan to rebuild the website. If you’re looking for a developer, drop me a DM - I’ll be happy to discuss some details.

best,

Anton

---

<div class="post-metadata">

**Author:** ![jnix284](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jnix284/32/29_2.png) [@jnix284](https://community.hubspot.com/u/jnix284)\
**Post date:** [February 6, 2024, 8:11pm UTC](https://community.hubspot.com/t/create-navigation-menu/99518/15 "2024-02-06T20:11:41Z")

</div>

@grega as @Anton mentioned, yes, you could just build a new page with the theme and replace the home page (unpublish current, publish new to same URL), but this would create a bad user experience for your site visitors (different menus, different design, etc. which could lead them to think the site was hacked).

---

<div class="post-metadata">

**Author:** ![DSteffes](https://avatars.discourse-cdn.com/v4/letter/d/46a35a/32.png) [@DSteffes](https://community.hubspot.com/u/DSteffes)\
**Post date:** [June 12, 2025, 1:43pm UTC](https://community.hubspot.com/t/create-navigation-menu/99518/16 "2025-06-12T13:43:21Z")

</div>

I’m trying to create a top menu bar like the _Burger King menu_ layout, but HubSpot’s docs aren’t helping much. Any tips?

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [June 12, 2025, 3:22pm UTC](https://community.hubspot.com/t/create-navigation-menu/99518/17 "2025-06-12T15:22:31Z")

</div>

Hey @DSteffes,

what exactly would you like to create?

The menu can be created with default modules, drag&drop and a little bit of CSS.  
Or you can create a custom module if you like.

If you mean the table of content, you have (at least) two options in HubSpot. Either creating a custom module with a repeater and manually add everything to it, or create a JavaScript that will generate the content automatically based on each h-tag.

p.s.: Please consider creating a new topic in the community for your request as reviving a thread that’s 1,5 years old might not be the best solution 🙂 If you have found something like this thread, you can always link to it in your topic

best,

Anton

---

<div class="post-metadata">

**Author:** ![Martin28](https://avatars.discourse-cdn.com/v4/letter/m/8491ac/32.png) [@Martin28](https://community.hubspot.com/u/Martin28)\
**Post date:** [June 19, 2025, 10:12am UTC](https://community.hubspot.com/t/create-navigation-menu/99518/18 "2025-06-19T10:12:19Z")

</div>

Your post helped a lot I was having the same issue with my menu site
