I learn bootstrap and attemp responsive page as apple main page (sorry, I can`t post more two links)
In header all element hiden under button, except for apple and bag.
big header
small header
In small size of page, button is left, apple is center and bag is right.
And under button are all element, except for apple and bag. How can I this result get?
My code:
<header class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsive-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="responsive-menu">
<ul class="nav navbar-nav" >
<li><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/apple/image_large.svg"></li>
<li><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/mac/image_large.svg"></li>
<li><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/ipad/image_large.svg"></li>
<li><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/iphone/image_large.svg"></li>
<li><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/watch/image_large.svg"></li>
<li><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/tv/image_large.svg"></li>
<li><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/music/image_large.svg"></li>
<li><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/support/image_large.svg"></li>
<li><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/search/image_large.svg"></li>
<li><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/bag/image_large.svg"></li>
</ul>
</div>
</div>
</header>
and default bootstrap.css
Firstly, change your navbar-header element as follows :
<!-- Add a text-center class to handle centering your Apple logo -->
<div class="navbar-header text-center">
<!-- Add your Apple logo (only seen on extra-small viewports) -->
<a class="navbar-brand visible-xs" href="#"><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/apple/image_large.svg"></a>
<!-- Add your last "shopping" icon to the right (via pull-right) -->
<a class='pull-right visible-xs' href="#"><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/bag/image_large.svg"></a>
<!-- Add the pull-left style to your button to left-align it -->
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#responsive-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
Then add the following styles to adjust those as necessary to your custom CSS :
/* Absolutely center your logo over the header */
.navbar-brand { float: none; position: absolute; top: 0px; width: 100vw; padding: 0}
/* Set the default display option to cause it to be centered */
.navbar-brand img { display: initial; }
/* Add a left margin to your now left-aligned toggle button */
.navbar-toggle.pull-left { margin-left: 10px;}
/* Do the same for your right-aligned shopping link */
a.pull-right { margin-right: 10px;}
Example
You can see an example of this here and demonstrated below :
Related
Currently i have the following Header(Template from Bootstrap for Responsive Purposes):-
But it's not very nice to have a such big navigation pane, so now i want to place the Profile Picture in the middle of the Border like this(The circle should be the profile picture):-
The question is, how can I achieve this without using a absolute position which would ruin my responsive design? (It should be a proportion of 50/50)
Edit: The HTML Code for the Profile Picture is:-
<div id="nav_profile">
<div class="profile_picture">
<img src="assets/img/profilepicture.png" alt="Profile Picture">
<figcaption><i class="ion-android-add"></i></figcaption>
<a id="profile_hover_txt" href="profile.php">View Profile</a>
</div>
</div>
The CSS Part is just for the transitions and the styling for the Picture.
Try The Following Code....
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand brand" href="#">Custom Logo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
<li>News</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <img width="50px" height="50px" class="img-circle" src="http://i.imgur.com/bQ6Rroe.jpg" alt=""></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
You can simply set the height of the picture to 200%. The float: right; and width: 100px; are just in my code so it works without an image but the principal works without them.
#menu {
width: 100%;
height: 50px;
background: #000000;
}
#pic {
float: right;
width: 100px;
height: 200%;
background: yellow;
}
<div id="menu">
<div id="pic"></div>
</div>
i added at my hoe page a navbar with toggable icon on small screen; It is the typical navbar of bootstrap.
I have the problem that when i go on developer tool and resize the screen in order to test the responsive part, happen that the icon doesn't toggle, it is like is not active.
Any help?
Here is the code:
<nav id="header" class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navmenu" aria-expanded="false" aria-controls="navmenu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img id="logo" src="images/art-of-hair.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navmenu" class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">Home</span></li>
<li>Hair Styles</li>
<li class="">About</li>
<li class="">Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
and css:
* {
margin: 0;
}
body {
font-family: 'Alice', serif;
}
#header {
height:200px;
}
#logo {
width: 300px;
height:150px;
}
#navmenu {
margin:30px 120px 0 0;
}
In case of toggle, I guess you also need some jQuery to make the toggle function.
Maybe try something like this:
<script>
$("button").click(function(){
$("#navmenu").slideToggle();
});
</script>
Here is the fiddle to see issue.
https://jsfiddle.net/nn6ydqcw/1/
<header>
<nav class="navbar navbar-inverse" role="navigation ">
<div class="col-md-12" style="height:150px;background-color:#FFFFFF">
<div class="col-md-3" ><img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/200px-Google_%22G%22_Logo.svg.png"></div>
<div class="col-md-9" ><h1>Tag line will come here and it will be managed dynamically</h1></div>
</div>
<div class="col-md-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
</header>
I am using Bootstrap 3 in above code and it works fine on desktop / laptop etc. But when I see it in mobile or resized browser to see in smaller screen, it is displaying in following sequence. So problem is that in smaller screen when I click on toggle icon then navigation buttons overlaps tag line.
Logo
Navigation Toggle Icon
Text based Tag line
I want to do so they display in following sequence. So even when I see them in smaller screen, navigation buttons should not overlap tag line.
Logo
Text based Tag line
Toggle Navigation Toggle Icon
Please let me know how can I get required result.
Update your code as follows:
CSS:
#media only screen and (max-width: 768px) {
body {
background-color: orange; //FOR TESTING PURPOSE
}
#tagstyle {
position: relative;
left: 220px;
top: -200px;
padding: 0px;
width: 60%;
}
}
HTML: [Add an id as shown below]
<h1 id="tagstyle">Tag line will come here and it will be managed dynamically</h1>
Desktop View:
Mobile View:
Check the style="height:150px;background-color:#FFFFFF" you're having conflict in the height:150px; And I think you need to use the push and pull in bootstrap.
hey guys i am basically new to css and trying to build a bootstrap navbar ,the issue is that i had to center certain contents of the navbar I.E , center the menu items .
basically after going through the source of the bootstrap navbar i figured out that the reason all elements in the navbar appear in one line rather then moving on to the next line is because the elements in the navbar are floated either right or left , the movement you remove the floats the alignment is broken ,
so what i tried to do is : - HTML code(TYPICAL bootstrap markup) :
<nav role="navigation" class="navbar navbar-default navbar-fixed">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand -->
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></li>
</ul>
</div>
</div>
</nav>
And the CSS(customized css) :
.navbar-default .navbar-collapse ul.navbar-nav{
text-align: center;
float: none;
width: 300px;
}
.navbar-default .navbar-collapse ul.navbar-nav li {
float: none;
display: inline-block;
}
.brand-holder {
height: 200px;
background: #000;
}
.navbar-fixed {
position: fixed;
width: 100%;
}
The thing to notice is see how i have removed the floats in ul.navbar-nav and ul.navbar-nav li
Fiddle here . , now see how the contents of
<ul class="nav navbar-nav navbar-right">
<li><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></li>
</ul>
is floated to the next line . is there anyway that i can have the contents back inline with the menu items ?
P.S. :: i would really like to avoid using absolute positioning .
Thank you.
Alex-z.
If my understanding of your question is correct, probably by changing the CSS as below
.navbar-default .navbar-collapse ul.navbar-nav{
text-align: center;
float: none;
text-align:left;
and instead of keeping an another UL for the FB Logo keep the whole Li as in the first Ul itself and aligning to right, should help
so the final html will be
<nav role="navigation" class="navbar navbar-default navbar-fixed">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand --> <!-- </div>-->
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li style="float:right"><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></li>
</ul>
</div>
</div>
You can have a check on the result fiddle
Hope this helps.
Thanks,
Philemon
Instead of using the branding of Bootstrap 3, I am after a responsive navbar that has my logo at the leftmost position of the navbar with required menu options just next to the logo on the navbar.
The issue I am not sure how to handle is that, as I want this navbar to be responsive, when the screen size is reduced to say a iPhone size, I want my typical Bootstrap hamburger menu positioned to the right-most of the navbar and when pressed, will reveal my menu items only but at the same time, I want my logo to always maintain the left-most position on my navbar, no matter what screen resolution is used.
I have provided the basic structure of what I have at the moment but unsure how to include my logo or for examples sake, a link for now to always remain on the navbar and always at the left-most position.
I have created http://www.bootply.com/HcZhCxMC4s for sample but it's not perfect as I am unsure how to position logo/link with menu items.
<nav class="navbar navbar-default" role="navigation">
<ul class="my-logo">
<li>Logo Link</li>
</ul>
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-left">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
</nav>
You just need to use the same markup of the Bootstrap Navbar ...
<nav class="navbar navbar-default" role="navigation">
<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>
/*YOUR LOGO OR LINK HERE WITH THE CLASS NAVBAR-BRAND*/
<a class="navbar-brand" href="#">Logo Link</a>
Check the BootplyDemo
you may want to add some styling:
css:
#media all and (max-width: 768px) {
.navbar-header {
position: absolute;
right: 0;
top:0;
}
.my-logo {
height: 50px;
padding-bottom: 0;
margin-bottom: 0
}
.my-logo li a {
line-height: 50px;
}
http://www.bootply.com/9KstQ2THvF#
Is this what you're after?
simplest answer on bootstrap's documentation page :
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>