I'm creating a small website and I'm stuck with the button alignment problem. I have a navbar list menu and I'd like to add a transparent Logout button near to them just in shape of another menu element, however, I couldn't be successful so far.
Here's a Bootply link you could see the problem; http://www.bootply.com/OXfRkJHEHs
I'd be grateful if you could help me.
<form>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li>
<a style="color:#900C3F" href="index.php">Home</a>
</li>
<li>
<a style="color:#900C3F" href="festival.php">Festival</a>
</li>
<li>
<a style="color:#900C3F" href="contact.php">Contact</a>
</li>
<li>
<a style="color:#900C3F" href="map.php">Map</a>
</li>
<li>
<input type="submit" value="Logout" class="btn element" style="color:#900C3F; background-color: transparent; margin-top:7px" href="Logout.php">
</li>
</ul></div>
<div id="push"></div>
</form>
Related
I'm trying display some elements positioned in the center (like dropdown list) of nav bar. But my radio buttons doesn't want to get offset. What should I add to my code?
<nav class="navbar navbar-default navbar-fixed-top second-navbar" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="container">
<form role="form">
<label class="radio-inline"><input type="radio" name="gr" value="0" onchange="val(this)">Popular first</label>
<label class="radio-inline"><input type="radio" name="gr" value="1" onchange="val(this)">Newest first</label>
</form>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button">
Items per page: <b>#Model.PagingInfo.ItemsPerPage</b>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>5</li>
<li>10</li>
<li>20</li>
</ul>
</li>
</ul>
</div>
</nav>
You need to add div with class radio. also you need to remove unnecessary tags
<nav class="navbar navbar-default navbar-fixed-top second-navbar" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="radio">
<label class="radio-inline">
<input type="radio" name="gr" value="0" onchange="val(this)">Popular first</label>
<label class="radio-inline">
<input type="radio" name="gr" value="1" onchange="val(this)">Newest first</label>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button">
Items per page: <b>#Model.PagingInfo.ItemsPerPage</b>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>5</li>
<li>10</li>
<li>20</li>
</ul>
</li>
</ul>
</div>
Here is the codepen : http://codepen.io/anon/pen/MKqwgJ
There is slight change in your markup buddy. Just do these listed changes and it will be perfect as you wanted.
1.) remove the class container from your <ul> tag.
2.) To move the radio button to the left, add this bootstrap class to the radio button <li> tag.
<li class="navbar-left">
3.) To move the dropdown to the right, add this bootstrap class to the dropdown <li> tag.
<li class="dropdown navbar-right">
4.) Now for the top spacing, you need to give some padding to the radio button form just like the one dropdown list has.
form {
padding: 10px 15px;
}
Voila ... perfectly aligned ! Here is the JSFiddle
Open the following bootstrap theme in full page mode:
http://plnkr.co/edit/0MV3QzRpJcPWlpuNMDav?p=preview
on the nav bar you will see six options:
Three are font-awesome icons and the other three are text "About, Download and Contact".
What I am trying to achieve is to place the font-aweome icons in the center of the navbar instead of towards the right.
I have tried various options, like placing them in etc.. but all that results in something or the other breaking.
<ul class="nav navbar-nav nav-advance-options">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li>
<a class="page-scroll" href="#flax"><i class="fa fa-leaf"></i></a>
</li>
<li>
<a class="page-scroll" href="#moist"><i class="fa fa-heart"></i></a>
</li>
<li>
<a class="page-scroll" href="#designs"><i class="fa fa-paw"></i></a>
</li>
</ul>
<ul class="nav navbar-nav nav-basic-options">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#download">Download</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
I am currently using the CSS bootstrap 3.2 in my application.
I am trying to place 2 drop down menu "with the arrow only- not button style" next to each other and then to the right I want to add a search bar.
I want to use the the dropdown menu that the bootstrap has but without the button style "arrow only" and a small search bar to the right in the vertical center.
I have tried to do that but the dropdown menus and the search bar do not line up.
here is a screenshot of what I have done
and here is my code
<ul class="nav nav-pills">
<li class="dropdown">
<a class="dropdown-toggle menu-sm-padding" data-toggle="dropdown" href="#">
My Name <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>My Profile</li>
<li role="presentation" class="divider"></li>
<li>Logout</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle menu-sm-padding" data-toggle="dropdown" href="#">
My Company Name <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu"><li><a class="master_client_change" href="#" id="current_client_id_2">Comp 1</a></li><li><a class="master_client_change" href="#" id="current_client_id_1">Comp 2</a></li><li><a class="master_client_change" href="#" id="current_client_id_3">Comp 3</a></li><li><a class="master_client_change" href="#" id="current_client_id_6">Comp 4</a></li></ul>
</li>
</ul>
<div class="width-sm-size box-inline-block">
<form action="/accounts_search.php" method="get" id="searchforactivities" class="navbar-form navbar-right row-right-xxsm-margin" role="search">
<div class="input-group">
<input type="search" class="form-control" name="search_term">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go</button>
</span>
</div>
</form>
</div>
How can I get the dropdown menu and the search bar to line up?
and is there a trick in making the search bar little fancy by making the the corners of the input round and the Go button a search icon?
I am using the Bootstrap 3.0 framework and Modern Business theme (http://startbootstrap.com/modern-business). When using the default Modern Business nav settings, the main menu dropdowns work brilliantly as they should on mobile devices. However, when I change the menu to be "nav-justified" in the HTML code (using Bootstrap's "nav-justified" CSS class), the menu does not work as expected.
When you tap any menu item with dropdowns, it shows a navigation dropdown on the far left side, which runs outside of the parent CSS frame:
I am also using the Sticky Nav solution found here: How to use the new affix plugin in twitter's bootstrap 2.1.0?
Here is my HTML code for the menu:
<nav class="navbar navbar-inverse" role="navigation">
<div id="nav-wrapper">
<div id="nav" class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="span12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!-- navbar-header -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav nav-justified">
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li class="dropdown">
Portfolio <b class="caret"></b>
<ul class="dropdown-menu">
<li>1 Column Portfolio</li>
<li>2 Column Portfolio</li>
<li>3 Column Portfolio</li>
<li>4 Column Portfolio</li>
<li>Single Portfolio Item</li>
</ul>
</li>
<li class="dropdown">
Blog <b class="caret"></b>
<ul class="dropdown-menu">
<li>Blog Home 1</li>
<li>Blog Home 2</li>
<li>Blog Post</li>
</ul>
</li>
<li class="dropdown">
Pages <b class="caret"></b>
<ul class="dropdown-menu">
<li>Full Width Page</li>
<li>Sidebar Page</li>
<li>FAQ</li>
<li>404</li>
<li>Pricing Table</li>
</ul>
</li>
</ul>
</div> <!-- collapse -->
</div> <!-- span12 -->
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div> <!-- navbar -->
</div> <!-- nav-wrapper -->
</nav>
And here is the script I have at the bottom of my HTML:
<script>
$(function() {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
});
</script>
Here, also, is the obligatory JSFiddle to examine (JS and CSS code linked in the JSFiddle panel on the left): http://jsfiddle.net/L94Mj/
I'm sure I'm somehow dancing around the answer, but this thing has had me stumped for two days now, and I need a fresh brain to look at things. I'm happy to provide whatever extra code is needed to help find the answer.
Using the latest version Bootstrap, I am wanting to replace the branding area text with a logo. On my desktop, it looks perfect, on my iPhone, the logo appears under the small collapse menu, whereas it should be beside it (to the left of it). If I make the logo smaller, it works fine on the iPhone, but the small logo is too small for the desktop site. I thought by adding the img-responsive class to the logo, it would shrink accordingly, but that fails. If you want to replicate this, the logo is 276px wide 40px high.
Everything appears fine on the iPhone in horizontal orientation (it is strictly a problem when viewing in vertical, which is naturally the way most people hold their phone).
Here is the related code (you will notice near the bottom, there is a purchase button, this automatically gets hidden on the iPhone, which would suffice for the logo if there is no other option). Mind, the ultimate solution would be to have the logo shrink based on screen size.
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><img class="img-responsive" src="img/logo.png" alt=""></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Application <b class="caret"></b>
<ul class="dropdown-menu">
<li>Features</li>
<li>Screenshots</li>
<li>Demos</li>
<li class="divider"></li>
<li>Purchase</li>
<li>Licensing Model</li>
</ul>
</li>
<li class="dropdown">
Documentation <b class="caret"></b>
<ul class="dropdown-menu">
<li>Version Info</li>
<li>System Requirements</li>
<li class="divider"></li>
<li>Installation Guide</li>
<li>Integration Guide</li>
<li>Frontdesk Manual</li>
</ul>
</li>
<li class="dropdown">
Support <b class="caret"></b>
<ul class="dropdown-menu">
<li>Knowledgebase</li>
<li>Submit Ticket</li>
<li>View Ticket Status</li>
<li class="divider"></li>
<li>Installation Service</li>
<li>Development Services</li>
</ul>
</li>
<li class="dropdown">
Contact <b class="caret"></b>
<ul class="dropdown-menu">
<li>Presales Questions</li>
<li>Contact Us</li>
</ul>
</li>
<li class="dropdown">
Legal <b class="caret"></b>
<ul class="dropdown-menu">
<li>Privacy Policy</li>
<li>Terms of Use</li>
<li>Site Security</li>
<li class="divider"></li>
<li>Money Back Guarantee</li>
</ul>
</li>
</ul>
<button type="button" class="btn btn-success" style="margin-top: 8px; margin-left: 30px;">Purchase</button>
</div>
<!--/.nav-collapse -->
This fixes the I-phone issue with the brand logo appearing under the collapsed menu icon. you might have to play with the width a bit depending on your setup:
#media (max-width: 500px) {
.navbar-brand{
width:60%;
}
}
Put your image as a background in css with background-size:cover.