Join David Powers for an in-depth discussion in this video Inserting a navigation bar, part of Responsive Design with Bootstrap and Dreamweaver CC 2015.
- In this chapter, we'll insert and edit a navigation bar in our Bootstrap page. Dreamweaver CC makes inserting a Bootstrap navbar a breeze with just a couple of clicks, so let's get to work. Make sure that we've got the focus inside the document window by clicking anywhere inside there and that brings up this blue outline with Body. That ensures that our navbar will be inserted in the correct place. So we need to go to the Insert panel. Select that, and then the menu at the top left, open that and select Bootstrap Components.
And then the fourth item down is Navbar. And if you click that, it opens a submenu. You've got four options. Basic Navbar, which as it says is pretty basic. Then a navbar that's fixed to the top, one that is fixed to the bottom, and an inverted navbar. An inverted navbar basically has a black background and white text. The one that I'm going to use is navbar fixed to the top, so if we select that, Dreamweaver automatically inserts a complete Bootstrap navbar.
Now the default navbar has got a search form in it, and it's also got some links and dropdowns on the right hand side. I want to simplify this by getting rid first of the search form, so click anywhere inside the search form, and then in the DOM panel, you can see that the input element, which is that search form, has been highlighted. To get rid of the whole form, just go up to Elements and select Form, and that will select all of the underlying HTML that has that search form in it, and then just press Delete, and everything is automatically deleted.
Dreamweaver then selects the next element, which is this unordered list that contains a link and also a dropdown menu. And if we expand this in the DOM panel, just scroll down a little bit, open this list item, and we can see that there is another unordered list, so it's a nested unordered list inside there. What I want to do is to go back to that first unordered list. It's got the class "nav navbar-nav navbar-right." If we select that, it then selects everything up here again, and just press Delete, and that gets rid of that link and the dropdown menu on the right hand side.
We're left just with the brand, a couple of links here, and a dropdown menu. In the next video, we'll start editing the menu.
- Defining a custom Bootstrap layout grid
- Inserting and modifying a navigation bar
- Adding a container for a hero image
- Working with columns inside a Bootstrap container
- Creating placeholder content with Emmet
- Speeding up layout by duplicating columns
- Moving page elements in the DOM
- Previewing the mobile webpage with Device Preview