main menu move to sidebar menu brooklyn theme

Solved
GravityStore
Tourist
8 0 1

Hi,

how can i fix my sidebar menu to top menu, i have added 6-7 tabs in my menu bar and now its on left side of the sidebar before that it was on top, how can i fix that issue, btw i i'm using brooklyn theme.
store link,

https://gravity-store-27.myshopify.com/


please see the link you will know what i'm saying
1. https://prnt.sc/r8y5yi

0 Likes
Rae
Shopify Staff
Shopify Staff
1016 79 267

This is an accepted solution.

Hi, @GravityStore!

 

Rae from Shopify here. Thanks for reaching out about the menu on your Brooklyn theme

 

Looking at your site now, I can see that the menu has been changed, and your menu items are appearing at the top of your theme towards the right hand side. Your logo is also now appearing on the left of the page correctly, too. I'm glad to see that this has been resolved, but I still wanted to reach out to explain why this happened, in case you - or any other Community member - ever runs into this situation again. 

 

On Brooklyn, if many extra menu items are added to the main menu, and this menu starts to take up a large amount of space on the theme's header, the menu will automatically convert to a sidebar menu. You can find more information on this here. To prevent this from happening though, we recommend: 

 

  • Adding only 4 or 5 links to the first level of your main menu. If you need more than this, consider using drop down menus
  • Use a narrow font in this section of your theme. To change the font, follow these steps
  • Shorten the titles of your menu items as much as possible. For example, using 'About'  rather than 'About Us'

It's also a great idea to consider building a footer menu to hold information that's important to customers, but might not need to exist on your main menu. Once you've built a footer menu, it can be added to your theme by following these steps

 

Please let me know if you have any other questions or concerns about your Brooklyn theme, or the navigation settings. I'll be glad to help with anything that might come up. 

 

Equally, I'd love to hear more about your business and how you're planning to market your products. Feel free to reply back to me here if you'd like to discuss this further! 

Rae | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Itallaboutnof1
New Member
2 0 0
Hi,

how can i fix my sidebar menu to top menu, i have added 6-7 tabs in my menu bar and now its on left side of the sidebar before that it was on top, how can i fix that issue, btw i i'm using brooklyn theme.

0 Likes
GravityStore
Tourist
8 0 1

how many level of your menu is ? because Brooklyn does not support multi level menu.

0 Likes
Rae
Shopify Staff
Shopify Staff
1016 79 267

Hi, @Itallaboutnof1!

 

Thanks for reaching out about this. 

 

When many menu tabs are added onto the Brooklyn theme, the theme will usually automatically convert the menu into a sidebar menu to conserve space in the theme's header. To learn more about this, please take a look at this help document.

 

You mentioned you have 6-7 tabs on your menu, so it sounds like this is what happened on your theme, too. With this in mind, I recommend checking out the steps I mentioned above and limiting your menu to only having 4-5 tabs, using a narrower font, or shortening the titles on your menu items. It might also be beneficial to use a drop down menu, as well. 

 

Have you had a chance to check out my initial reply with more information regarding this topic? If not, I suggest giving it a quick read, as the information mentioned there will likely help resolve this issue on your theme. However, if you're still encountering troubles with this, please let me know and I can certainly take a closer look into things and provide more assistance. I'm happy to help. 

 

Looking forward to hearing back from you! 

Rae | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

zohraax
Excursionist
23 0 2

I am having this same problem where my menu was across the top of the page and is now showing as a sidebar menu rather on the top. I would like my menu to be across the top of the page and I only have 4 tabs so I am not sure why this has happened. 

07520CF6-4B99-4CDC-A1C9-D0E8927D6A3C.png

 are you able to help me please

0 Likes
zohraax
Excursionist
23 0 2

How did you fix this problem as I am having the same problem? 

0 Likes
Rae
Shopify Staff
Shopify Staff
1016 79 267

Hi, @zohraax

I appreciate you sharing your experience with the menu on your Brooklyn theme. 

Based on the screenshot you added in your reply, it looks like the sidebar menu is appearing on the mobile version of your site. This is something that commonly happens on the mobile view of Brooklyn, as this theme is mobile-friendly, which means the header portion of the theme that contains the menu is responsive, and will adjust to fit the size of the screen on the device that's being used to view your site. When the theme adjusts to fit mobile view, a sidebar menu will often display, and this can happen even when 4 or less menu items are used. This automatic adjustment helps ensure the menu can be easily located by customers, and that they are able to select the correct menu item they're looking for, without having to zoom in on the page. 

With this information in mind, if you'd still like to remove this sidebar menu and look into the possibility of having a menu display across the top of your theme on mobile version, then I recommend reaching out to Shopify Experts for more information on this. Experts are third-party developers and designers who are very knowledgable on our platform, and have the skills required to complete complex customizations such as this. To explore this further with Shopify Experts, please use this link to contact them directly. 

In the meantime though, I wanted to let you know that I checked out the desktop version of your site on my end, using the URL provided in your screenshot, and on this version of your site I can see that the menu is displaying correctly across the top of the page. However, if you'd like to condense the menu further, I recommend renaming your 'Contact Us'  menu item to say 'Contact'  instead. This will save some space in your theme's header, and ensure the menu displays closer to the righthand side of the page on desktop view. To edit the name of this menu item, just login to your Shopify admin and click on 'Online Store > Navigation > Main menu'  and select 'Edit'  beside the 'Contact Us'  menu item. We have more details on this here

Feel free to let me know if you have any additional questions about this, and I can certainly help provide more assistance! 

Rae | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
zohraax
Excursionist
23 0 2
Yeah I managed to work it out in the end. Thanks for your help.
0 Likes
Rae
Shopify Staff
Shopify Staff
1016 79 267

Hi, @zohraax

Thanks for following up and confirming this has been resolved. I'm glad to hear that you were able to reach a solution! 

If you need any additional help with this, please feel free to reply back to me here. However, if you have any other questions or concerns that are separate from this query, I recommend creating a new topic right here in the Shopify Community to seek further assistance. 

Cheers! 

Rae | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog