I like to create a stylish button bar at the bottom of the mobile view. I like to use the glyph and awesome icon set for it. So I've placed them in a <span> tag, but first problem is that they have different sizes and in general they are very small.
I've tried also to use <button>s instead of <span>, but there is no flow in the design, because the buttons are seperated from each other.
Any ideas or examples how to design this navigation/button bar?
Related
I made a leftsided navigation bar that works very well, but I still can’t add any icons inside the buttons properly. Here is the code of the navigation bar in CodePen
codepen.io/Eduardo-Trindade/pen/MWXMZvb
I tried adding the icons to the buttons, but it appears at the corner of it, not centered, and I couldn’t center it there.
The main reason behind this is that you are inserting the icons inside the span element. Insert the icons inside the tags and you are good to go.
The element span has the class toolkit making the icons appear at the corner. Try to have the icons, not inside the tooltip (span) class but instead inside the element. Use the flex property to get the image in the centre of the buttons.
I have a responsive Panel that in Mobile becomes scrollable because the dropdown text content is too long.
Mobile dropdown (at least in iOS) only displays a portion of the selection anyways when you select the dropdown.
What's the best way to handle this?
Sample Bootply Here
This is more of a styling issue for IOS rather than Bootstrap, but it looks as though you just need to add an optgroup tag after your last option:
http://www.bootply.com/Xw8pzjoACx
Set the dropdown width in CSS to 100% to stop it overlapping the container.
Unfortunately the title I have given is very vague. I honestly wasn't sure how to word it. Anyway, basically I currently have a vertical navbar with a small caret beside the text. Once clicked, the particular button uncollapses and shows it's contents.
As seen in the image above, I'm attempting to have a secondary caret that should be sitting on the right of the button. This caret will follow suit on every other button once I get it working. Anyway, I'm currently using twitter-bootstrap and from what I understand, I could be able to split the button into 2, each having their own function. For example, if one were to click the text and the downwards caret, it should uncollapse the menu (Which it does fine right now). Though, when you click the right facing caret, it should just bring you to another page via an href or something. Currently, clicking either button will collapse and uncollapse the menu.
As you can see, the right facing caret separates itself from the original button but in a weird way. On the far right of the image is an example of the button separation I would like. In the Twitter-Bootstrap example, the "button" text and the caret both do different functions. I'm not entirely sure on how to achieve this via the current button setup I have. I'm quite happy with how the current buttons look visually but I want to be able to add that secondary caret that is justified to the right of the button. As well as have that secondary button separate nicely, similar to that of the Twitter-Bootstrap example.
TL;DR: how do I get a button to split into 2 piece via the current HTML that I have. I would like to keep the styling and I would like each button to have it's own functionality.
(Enlarge image)
http://i.imgur.com/Xm7ILoq.png
Just make two buttons and style them to be close to one another. Use CSS styling to get it done. You can lower the margins on the sides to get them closer, you could use border-radius to get rid of the corners in the middle, etc etc.
Just figure out how you want it to look. And forget about splitting buttons, that is not something you can technically do, or should want. Create 2 buttons and style them.
I'm trying to modify a theme to fit my design in Wordpress. I'm having a lot of trouble editing the menu bar in any way (apart from just colors).
I need to know how to achieve something like this: http://i.imgur.com/hPBo4is.png
Is it possible to just add the image to the menu bar and link certain areas? How can I get this into my website?
Thanks.
you have to crop image with whole black color without text portion and apply as background image to menu's "ul" tag. and then to display that text links you have to play with padding & margin.
thanks
Tried to use twiter bootstrap
to create a top nav-bar in my master page.
http://jsfiddle.net/ZqCah/1/
I have some bugs and would appreciate some help:
1- I want to turn all my content to be rtl.
meaning My site will be the most right and register will be the most left.
2- The items are at different hights.
How can I align them to the middle of the bar?
3- I want to add an my site logo to the bar, as seen here
ask assitance for html page tabular layout
can it stick to the screen like the bar itself?
can it share the size with the bar itself?
Bootstrap now (3.3.5) supports RTL! all you have to do is replace all "left" with "right" inside bootstrap.css file (or better, directly on the "less" source files). The carousel maybe needs some tweaking, but 99% of the stuff works fine. Here's an example
If you want to create RTL website with twitter bootstrap you can use RTL version of it.
http://pyjamacoder.com/2012/02/01/twitter-bootstrap-v2-rtl-edition/
and
https://github.com/donaldducky/bootstrap-rtl
I create webpage with these
sushiant.com created with rtl version of bootstrap
You may want to explore the use of FLOAT and POSITION in your CSS. Try to separate each of your elements inside DIVs and experiment on FLOAT and POSITION properties.
For example, your number 1 question...you can put "my site" using:
<div style="float:left">my site</div>
<div style="float:right">register</div>
You can refer to this positioning tutorial http://www.barelyfitz.com/screencast/html-training/css/positioning/