Jump to content

Bedford Navbar hamburger menu removar

Recommended Posts

I am working on a Bedford template and when you have multiple nav bar items the site will automatically change the navigation style so it becomes a drawer with a hamburger menu to accommodate.

I have a use case where I would want all navigation items to show, is there any way to stop the template from automatically changing the nav bar? 

Thanks!

PS. I am very new to website management (and Swedish) so please reply in a squarespace-for-dummies way! 🙂

Link to comment
  • Replies 4
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

There may be code to keep the Nav bar from morphing to a hamburger, but there are other steps you can take as well to prevent this. 

From Bedford support guide:

Navigation menu icon is showing on a computer

A ☰ appears when there’s not enough room in the browser window for all navigation links to display. Click the menu icon to display a navigation overlay.

The menu icon and navigation overlay help make your site mobile-friendly, responsive, and easier to navigate. It’s not possible to remove this feature. However, there are some things you can do to reduce the width and display all links:

  • Reduce the number of navigation items. One method is using folders to create drop-down menus.
  • Reduce the font size and spacing of the navigation using the Nav link font tweak in the Site navigation section of site styles.
  • Reduce the site title or logo container width in the Site header section of site styles.
Edited by derricksrandomviews
Link to comment
  • 2 weeks later...

This is a bit tricky

Add this code to Website Tools (under Not Linked) > Custom CSS

/* Bedford Nav desktop */
/* Nav on desktop */
@media screen and (min-width:901px) {
    .force-mobile-nav.mobile-nav-open #siteWrapper {
    transform: unset !important;
    position: relative !important;
}

.force-mobile-nav.mobile-nav-open #sidecarNav {
    display: none !important;
}

.force-mobile-nav #header #headerNav {
    display: flex !important;
}

div#mainNavWrapper {
    transform: unset !important;
    height: auto !important;
    width: 100% !important;
}

.force-mobile-nav #mainNavWrapper nav {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.subnav {position: absolute;z-index: 99999;opacity: 0;}

header#header {
    z-index: 99999999999;
}
.folder:hover .subnav {
    opacity: 1;
}

div#mainNavWrapper {
    overflow: hidden !important;
}
div#mainNavWrapper {
    background-color: transparent !important;
}
.mobile-nav-toggle.fixed-nav-toggle, .mobile-nav-toggle {
    visibility: hidden !important;
    display: none !important;
    opacity: 0 !important;
}
}

image.thumb.png.53ec2cc60aea757d3f0f45c6d76532a2.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.