Bedford Navbar hamburger menu removar

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! 🙂

Can you share your website URL?

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:

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.

On 9/19/2023 at 3:25 PM, Ziggy said:

Can you share your website URL?

https://uppsala.universitetskyrkan.se/

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;
}
}