My TAGS are taking a lot of space on a mobile device. There are several choices, and I am trying to determine what direction I should go and what is easily possible:
Turn the TABs "Text" into TAB "Icons" to save space, and just have them lined up right where they are.
Turn all the TAB "Text" into a Button Dropdown at the top right like they do with most mobile apps.
I think I know generally how to do #1, but wouldn't it be better to do #2 because everyone expects that? Also there's a little problem, how do you do this? Setup Mobile Navigation with a button and make it Responsive?
Perhaps someone with more knowledge can suggest best approach of #1 & #2 and a brief summary of what to do to get to #2?
Here is the website so far: http://spring-resonance-9636.bss.design/
Here are some links to some ideas about good mobile design & dropdowns
BSS link https://v4-alpha.getbootstrap.com/components/dropdowns/#single-button-dropdowns
Touch Friendly https://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
Build CSS Dropdown http://www.creativebloq.com/css3/build-smart-mobile-navigation-without-hacks-6122800
- This one would require that I reorganize the content of the tabs into a single long page with links to the head of each tab's content. It was one of the alternatives considered earlier, and I could change to this format quite readily (time) if it were the right way to go. The fact that it is all CSS sounds pretty good to me, but I would probably get hung up as I am not a big CSS guy and I am just learning this interface, but I could certainly make a user.css and try stuff.
Well I don't know about anyone else, but I don't build my own navigations, there are too many out there that are already set up for this stuff. Because you chose to use a Tabs system instead of a Nav system, that means you will have to do all the work yourself to build your mobile nav setup. To be honest, I would leave it alone, it wraps very nicely unlike many navs do with multiple rows. Up to you though. If you are truly after a normal nav, then I'd definitely add another Nav to the page as your normal nav. You don't want to make tabs your tabs go to hamburger setups, that's not how that works for responsive tabs, your tabs are doing exactly what they are supposed to do at smaller sizes. Just my opinions of course. :)
Thanks Jo. I value you opinion. What do you think of the idea of making the Tabs become Icons when at XS level?
Provided I can find some good ones and can make the "responsive" change?
Then the Menu wouldn't have to become several rows and take up space.
If you have the space for an icon before the tabs wrap then you can add the icons for all screen sizes. I think it would make more sense to have the icons associated with the wording and then the wording effectively disappears leaving just the icons when the screen size gets to small for it all to fit would seem fine to me.
Add your icons and then drag/drop a span into each tabs link cut/paste/replace the text into the span's text. Select the span and in the Options pane expand the Responsive Visibility menu and tick which hidden-xx media break point option you want the wording to be hidden.
This is a good idea Saj, I like it.<br />
I'm trying to learn about font Icons, I saw a good video about adding those to bootstrap, but lost it. Here are some links for Glyphicons,
http://glyphicons.bootstrapcheatsheets.com/
https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp
FontAwesome Icons
https://www.w3schools.com/icons/fontawesome_icons_brand.asp
I don't know which to use or how to install them under DESIGN <Fonts>
When I right click on <Fonts> it has a choice for Install Google Fonts.<br />
Don't know what those are or if they are needed, but would need to install some good Icon fonts first I expect.
Will try to find that video ...
From this it looks like we cannot import fonts, ...but I recall seeing a video demo that did that....?
https://bootstrapstudio.io/forums/topic/how-can-i-import-my-own-fonts-in-bootstrap-studio/
The BSS app already comes with icons, you just need to drag/drop the icon component. Double click the icon or select it and use the Options pane on the right to select different icons and font icons to use.
Yes! I just saw that the Carousel uses a glypicon that is already in BSS. Those suggestions will give me a start. I see the COMPONENTS Image <icons>. Under OVERVIEW
So I guess I put the <icon> under <Tab> House There's not much other choice really. Here goes.
Well when <Image> <icon> was dragged from COMPONENTS to OVERVIEW it wanted to attach to <Link> shown above. I now see <i clas="glyphicon glyphicon-star"> and in the screen I see a blue star attached to the TAB "House". Its working! Up under OPTIONS there is big star and I've got to change some of those options appropriately.
It could not be easier! Thank you Saj. Boy and I lovin' BSS!
Ok, now I've added the glyphicons and put them at the front of the TAB labels.
The temporary 1 month website is now here http://crimson-paper-3666.bss.design/
I tried making this responsive but the entire TAB is turned off and there does not seem to be a way to Leave the glypicons ON.
Then I tried to add a <Paragraph> under <Link> so now the first tab Home looks like this.
<Tabs>
<Tab Items>
<Tab> "House"
<Link>
<Paragraph> <<--- Put "House"
<Icon> <<--- Have glyphicon of a House
Now these are not inline, but one above the other. I think I could turn the on/off as we need.
Do I need a span element here? I'll try that.
Ok I ditched the <Paragraph> and am now using text which is inline, so it works! To make it responsive, I turned off in the OPTIONS to hide Mobile XS display. I am estatic!
<Tabs>
<Tab Items>
<Tab> "House"
<Link> <Icon> <<--- Have glyphicon of a House
<Span> <<--- Put "House"
Under OPTIONS Set selective visibility and check Hide XS
<
p>
Now I'd like to make a Hover Popup that will have "House" in it. Anyone know how to do this? Maybe I can figure it out after setting up these other TABS.
In COMPONENTS I did not find anything like "hover" "mouse" "popup" etc. Is this going to take javascript or is it in "Modal" Maybe this is too complicated for me to do.
I tried making my own javascript file down to the left in DESIGN by right click on Javascript and select new file. Then renamed tooltip.js and pasted in the { $(function () { $("[data-toggle=tooltip]").tooltip(); }); }
And saved. Then I had to figure out the right "link" location. So I went to the OVERVIEW "House" Tab#1 and saw the HTML line that was highlighted.<br /> The <link> just below already was an a href using data-toggle=tab#1 So I went down further to the <icon> i class=glyphicon,etc and that seemed right because it was for the House glyphicon. I used ATTRIBUTES to enter both { data-toggle= "tooltip" title= "House" ]
and that took properly. Then I started trying it thinking there was not chance in the world that I got it right. Well, it worked on the first try this time. How often does that happen? --Never to me. Just need to style the box a little. Thank you!