(This is for another, different website.)
Is there a "canned" Nav Component that is in vertical format rather than horizontal? Perhaps I need to make one using CSS?
The website has 15 separate pages in the navbar, which is most suitable to a vertical nav format on larger screens. I would like to have the following nav:
Mobile XS - standard button upper left that expands.
SM - Horizontal one line bar that shows the Page name, with a touch dropdown to select another page.
MD & LG - Vertical navbar on left side.
Is this something I should build from scratch or should I start out with one of the components? Or perhaps blend two?
It seems to me that I could have Column 1 of the 12 columns be for Navigation.
Then when it is wide at MD & LG the nav links will be located vertically, and when the width of the screen narrows, the 12 columns will automatically stack, and the Nav Links would then collapse & expand for selection (SM). For XM or Mobile I would then have to turn Col 1 into a button somehow.
are you still using the tabs thing for your menu? If so I doubt you're going to find anything that will be able to convert that to a normal menu. If it's for a different site then just use a normal menu that has the hamburger menu built in, you shouldn't ever really need to create all this on your own, but in the case of the site with the tabs, yeah you're going to have to either figure something out with scripts, or live with it as it is.
Jo, this is for another website which I am updating to be responsive. This website currently has a vertical navigation column on the left done in html & css which is the page selector.
This is the website. https://mysticvacation.com/ Using the old CSS and Html code I've enlarged text and space between links to conform with Mobility requirements, but need to get it to be more responsive, so I've started working on a new BSS website. I think I'll just use my html & css for the vertical menu as start.
Ah I see what you're trying to do now. That's a lot of links though, you may want to somehow combine a few into dropdowns to give your phone viewers a break in scrolling the menu :P You'll most likely want to incorporate a Hamburger type menu. I haven't tried this so I can't say if it works or even how it works, but I did see a Hamburger menu on the Online Components a couple weeks ago when I was browsing around in it. It may help. There are also external menus that you could use that would slide off to the side of the pge leaving a small button to bring it back out again when needed which may work as well. I don't recall what that feature is called, but if you google Responsive Vertical CSS Menu you'll most likely find something I'm sure. External menus aren't all that difficult to add, but (knows your penchance for combining things lol) don't combine the CSS until you have the menu fully as you want it so that it's easier to edit as you'll know exactly what code goes with it rather than searching through your own files for the code. :P
or a simpler one from w3schools https://www.w3schools.com/howto/howto_css_vertical_menu.asp
or just Bootstrap3 Navs Vertical https://v4-alpha.getbootstrap.com/components/navs/#vertical which is quite flexible.
PS Earlier I did not understand what either you or Saj said, something like ..."such and such compresses to hamberger code" ... I believed then that "hamburger code" was bad! Should have asked then and there...
You are right about handling the number of links without having mobile viewers have to scroll so much...It's a bit of a problem. For many webpage I do have a second tier category which might help with a two level menu...
Here's another which is interesting. https://webdesign.tutsplus.com/tutorials/big-menus-small-screens-responsive-multi-level-navigation--webdesign-8452