I have a scenario where I have created 2 nav bars one above the other (navbar-inverse above navbar default) the top one acts as the main navigation and the lower one the secondary navigation. I want to alter the icon/button toggle that apperas when the viewport is reduced to mobile/tablet size. Currently t2 hamburger menus appear which is not ideal.
I need to change the default hamburger button that is displayed on the secondary to somethoing else, I just want a down arrow on the secondary navigation.
Are you not wanting the hamburger menu on the second navbar at all? Because you can set it to not show so your secondary nav items are always visible if you want. Or do you really just want to have the secondary nav hamburger icon be a downward pointing arrow?
If it's later then the quick solution, drag/drop icon component then add this CSS
I simply want the downward chevron arrow to appear in place of the hamburger in the second nav menu which has the classes:
nav navbar-defauly navbar-fixedtop
Does this CSS stop the hamburger from appearing?
When I drag an icon element to the nav bar the only way it appears is if I place it in an existing link
Do I apply the css to the icon or the parent element?
What I noticed as well is, if you have 2 "Navigation Clean" components one above the other and you click on the Hamburger menu on the bottom Nav and open the dropdown menu, it opens the top Nav dropdown menu. Whereas, if the screen is bigger and displays the full Nav menu, it works correctly.
@windy, the reason that it is like that is because when you drag the Navbar Clean component a second time, it does not change the buttons data-target="#navcol-1" Attribute as well as the navbar collapse section's id="navcol-1". You have to manually set those to be something different for your second Navbar Clean component.
To do that, in the Overview pane (bottom/left), expand the Block for the second Navigation Clean. Then expand it's Navbar block, select the Navbar Toggle block. Then expand the HTML pane (middle/bottom/left) and then expand the Attributes pane below that. Click the plus sign to add/replace the data-target. Type in the first box data-target then in the second type something in like #navcol-2, click Apply. Then in the Overview pane, select the Navbar Collapse block. Then in the Attributes pane change the id from #navcol-1 to #navcol-2, click Apply.
You will need to do something similar for each additional Navbar Clean components you might have on the same page, if you do.
@matthm, You have to set the apps device toolbar (top/right next to Options pane) to the phone icon to see the hamburger menu. Then drag/drop the icon on to the hamburger menu. In a way if you didn't do the CSS, you should see both the hamburger menu and the icon. Then when you apply the CSS the hamburger icon will be hidden but the button is still there with the initial icon which I think is the star icon. Double click the star icon and select a different icon you want.
What I gave you as CSS is the exact reference to use no need to worry about what it applies to it's already in the CSS rule. Of course though I assumed you were using Bootstrap Studio 4 beta 2 and not Bootstrap Studio 3.3.7.
If you need something for BSS3, then I'll have to think of something a little different but I think it's do-able.
Yes, I am using BS 3.3.7 and based on your feedback think figured it out.
I simply selected the mobile as the device then dragged an icon to the hamburger toggle button, selected each of the 3 bars that make the hamburger in the overview pane and deleted each (which are created with the CSS in 3.3.7 as opposed to being an icon)
A little additional CSS to match the width of the bars when replacing with the icon, I also chose to remove the button outline by giving it a border-width: 0px value