I have a fixed top navbar. Everything is fine for desktop. But it is hard to click links and buttons in mobile phones.
User can't click green areas:
Is it possible or easily implementable to make navbar stack and toggle button to be easily clickable. For example user can click each of the three sections like this:
My code and fiddle is below: http://jsfiddle.net/mavent/RaArC/11/
<nav class="navbar navbar-inverse navbar-fixed-top visible-xs" role="navigation">
<div class="navbar-header" style="text-align:center;">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-part2"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-part3" style="padding: 3px 15px;">
<img src="http://www.wdc.com/Global/images/icons/icon_supporthelp.gif" width="24" height="24" alt="aaaa">
</button>
<div style="padding-top: 15px;"> <a href="/page0" title="aaa" style="color:#ffffff;margin-top:40px;">Example.com</a>
</div>
</div>
<div class="collapse navbar-collapse navbar-part2">
<ul class="nav navbar-nav">
<li><a href="/page1">page 1</a></li>
<li><a href="/page2">page 2</a></li>
</ul>
</div>
<div class="collapse navbar-collapse navbar-part3">
<ul class="nav navbar-nav">
<li><a href="/page3">page 3</a></li>
<li><a href="/page4">page 4</a></li>
</ul>
</div>
</nav>
(similar question without answer is here )
Make your divs like this. width: 10%; and width: 80%;
You can change these percentages as you want. And then with float: left; arrange the divs.
Images of divs must be centered. background positions must be center center
I hope it can help.
Is this what you are looking for?
I changed the styling of your "Example.com" link to "display:block" and removed the surrounding <div>
(which was only providing some padding that I incorporated into the link block itself.)
<a href="/page0" title="aaa" style="color:#fff;padding:15px 0px;display:block;">Example.com</a>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.