Consider replacing the navigation with Bootstrap Navbar (or flexbox)

[chrisblakley]

It doesn't need to look like the stock Bootstrap navbar, but this could help standardize it and reduce the Nebula CSS by leaning on Bootstrap here. It would also allow for customizing nuances within the navbar (such as the order and location of the primary navigation).

We could still use it inside or above the hero. I want to consider this for both the primary and utility bars.

/inc/navigation.php

https://getbootstrap.com/docs/5.0/components/navbar/

Related #1990

[chrisblakley]

If we do this, it would require quite a bit of customization of the classes within the nav elements (ul, li).

We'd also want to figure out if we prefer the Bootstrap navbar "hamburger" menu accordion, or the offcanvas component.

[chrisblakley]

Also with the Bootstrap navbar, the dropdowns are a click-toggle, which I know has a recent movement behind using that (rather than the more common hover toggle), but I want to keep the hover at least for now.

I've been testing the markup a bit and I'm not yet convinced this will actually be easier/time saving over the current Nebula navigation...

Here is a starting point:

<nav class="navbar navbar-expand-lg navbar-light">
    <div class="container">
        <a class="navbar-brand" href="#">
            <img src="https://nebula.gearside.com/wp-content/themes/Nebula-main/assets/img/phg/phg-logo.png" alt="Logo">
        </a>

        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">Dropdown</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

[chrisblakley]

If we don't use the Bootstrap navbar, maybe use raw flexbox instead of columns– that would provide more flexibility and real estate for longer navigations and we could simply control where it appears in relation to the logo.

Maybe I'll do some real quick mockups.

• Logo and Nav both on left
• Logo on left, Nav in center, Search on right
• Logo on left, Nav on right (with or without search in the nav)

[chrisblakley]

I've decided against this for the moment.