I'm using a collapsible bootstrap navigation. I made a few changes to a .css so that navigation links look like tabs. Positioning links at the bottom of header using a margin property did not work, because when zooming in and out navigation was sometimes pushed up or down by a pixel. Instead I set a position property to absolute to place navigation at the bottom of the hader. Now when I click on the navbar button. Navigation is pushed upwards instead of downwards and header is not expanding.
Here's my HTML:
<div class="header-inner clearfix">
<nav class="navigation pull-right" role="navigation">
<div class="navbar pull-right">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
</a>
</div>
<div class="nav-collapse in collapse" style="height: auto;">
<ul class="nav menu nav-pills">
<li>
<a>link1</a>
</li>
<li>
<a>link2</a>
</li>
<li>
<a>link3</a>
</li>
</ul>
</div>
</nav>
</div>
And here is my CSS:
.nav-pills > li > a {
border-width: 2px 2px 0 2px;
border-radius: 5px 5px 0 0;
border-color: #cc0000;
border-style: solid;
padding: 8px 12px 8px 12px;
}
.header-inner {
border-bottom: 2px solid #cc0000;
position: relative
}
.navigation {
position: absolute;
bottom: 0;
}
Im hoping this can be solved setting a margin of navigation using different units than pixels if not, how can I change the .js file.
Thanks I already solved a problem. When a screen width is smaller than 900 px, when instead of navigation bar a navigation button apears I just set a position property to static and now everithing works fine.
Thanks anyway
Related
Hi all I want to know if the following is possible. I am using bootstrap frame work to build a simple webpage. In the CSS I have borders on certain div elements showing as gray however when I view from the mobile a few of these divs are hidden and the border property looks very out of place. I would like to know if there is a way to target CSS elements with bootstrap so if a page is re sized to mobile the border color changes to black or doesn't show at all.
Here is a sample of my code.
HTML
<div class="container">
<!--Strt of row-->
<div class="row">
<!--leftdiv1-->
<div class="col-sm-6" id="left1">
<h3 class="text-center" id="main">XXXXXXX</h3>
<p class="text-center">XXXX & XXXXX</p>
</div>
<!--rightdiv1-->
<div class="col-sm-6 hidden-xs contacts" id="right1">
<ul>
<li><a id ="print" href="#"><span class="glyphicon glyphicon-print"></span> Print</a></li>
<li><span class="glyphicon glyphicon-save-file"></span> Download</li>
<li><a id="contact" href="#"><span class="glyphicon glyphicon-earphone"></span> Contact</a></li>
</ul>
</div>
</div>
CSS
#left1 {
border-right: dashed grey 3px;
border-bottom: dashed grey 3px;
height: 100px;
overflow: auto;
}
#right1 {
border-bottom: dashed grey 3px;
height: 100px;
overflow: auto;
}
Yes, as I see you are trying to hide the col-xs so the size is <768px See Bootstrap CSS So you would add a #media in your css. This will work:
#media (max-width: 768px) {
#left1 {
border-right: 0px;
border-bottom: 0px;
}
#right1 {
border-bottom: 0px;
}
}
You can put an extra class on the element for example: hidden-xs. It is build in bootstrap.
http://getbootstrap.com/css/#responsive-utilities
I have troubles with making an opening mobile version full width of my navigation bar. i tried making it every way possible unsuccessfully with out knowing what my problem is!
i tried to use media but i have no idea what to do to make it looks like the hamburger style that come and goes. i have to mention that i use pure css so i lack of knowledge in JS.
if someone will to help me I will be greathful, because right now i stuck and i dont know what to so about that.
<nav class="navi" id="target">
<div class="menu">
<a class="link-1" href="#">home</a>
<a class="link-1" href="#">info</a>
<a class="link-1" href="#">contact</a>
<div class="logo">
<img alt="Brand" src="logo2.png" height="40px" width="60px">
</div>
</div>
</nav>
this is the css for the navigation:
width:100%;
margin-top: 0;
padding: 10px;
text-align: center;
font-family: arial;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
position:fixed;
text-align:right;
z-index:10;
}
.navi{
background: rgba(0,0, 0, 0.5);
}
.navi:hover{
background-color: rgba(0,0,0, 1);
}
.link-1 {
transition: 0.3s ease;
color: #fff;
font-size: 16px;
text-decoration: none;
border-top: 1px solid ;
text-align:right;
padding: 20px 0px;
margin: 0 20px;
font-weight: italic;
letter-spacing:2px;
}
.link-1:hover {
border-top: 2px solid #fff;
text-decoration: none;
color:#fff;
padding: 3px 6px;
}
.logo{
text-align:left;
margin-left:35px;
margin-top:-25px;
thanks a lot!
I would suggest using Bootstrap 3. Go to getbootstrap.com Make sure to include bootstrap's css and javascript pages into your project. The code for your hamburger style nav bar should look something like this:
<div class="container" id="main">
<div class="container">
<div class="navbar navbar-fixed-top navbar-default">
<ul class="nav nav-pills unstyled">
<li class="">Skills</li>
<li>Projects</li>
<li>Contact </li>
</ul>
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
Note: You will only see the hamburger style if you resize your browser window below the breakpoint.
I have written a navigation bar based on the example given in the components link in Bootstrap. But the navigation bar does not collapse in a right way as it is supposed to do. As shown in the process below:
State 1
State 2
State 3
the navigation bar is not collapsed sharply, rather, it will become 2 columns first and then collapse.
I have found a same problem that has been asked previously in stackoverflow. It seems like the problem is caused by the default breaking point defined in bootstrap. However, I do not know where to change the breaking point and how can I do it.
I am using the latest bootstrap version, and following is the snippet of my navigation bar code.
Thanks in advance for any help and advice!
<!--navigation bar-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header"><!--brand and toggle get grouped for better mobile display-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navItems">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a><!--end of logo-->
</div><!--end of logo & collapsing logic-->
<div class="collapse navbar-collapse" id="navItems">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>ABOUT</li>
<li>WORK</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul><!--end of menu list-->
<form class="navbar-form navbar-left">
<input type="text" class="form-control" placeholder="Search on this site" id="searchInput ">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></button>
</form><!--end of search bar-->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> My Account <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><span class="glyphicon glyphicon-wrench"></span> Settings</li>
<li><span class="glyphicon glyphicon-refresh"></span> Update Profile</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-off"></span> Sign Out</li>
</ul><!--end of sub menu-->
</li><!--end of dropdown menu-->
</ul><!end of the user account menu-->
</div><!--end of collpased nav-->
</div><!--end of container-->
</nav><!--end of navbar-->
Update
I have looked into the solution provide by this link, which does not work in the newest version of Bootstrap.
And I have locate the code block which defines the breakpoint of the collapsing effect:
#media (min-width: 768px) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-right: 0;
padding-left: 0;
}
}
And I tried to modify the defined min-width, however I changed, it just does not work.
I finally figured it out:
To do this in the latest version:
I have modified three parts in the css file:
First you need to set when the navbar-header will float to left (in may case 1000px):
#media (min-width: 1000px) {
.navbar-header {
float: left;
}
}
Then you will need to decide when all the menu button will be disappeared:
#media (min-width: 1000px) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-right: 0;
padding-left: 0;
}
}
Last you need to define when the navbar-toggle will take effect:
#media (min-width: 1000px) {
.navbar-toggle {
display: none;
}
}
Then just wait to see the magic happen:
When the screen reached the 1000px threshold:
From
To
Seems like you should be able to override the default navbar collapse point like this.. (Assuming 1000 pixels in the new collapse point):
#media (max-width: 1000px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
Demo: http://bootply.com/UQaiG0oNTR
I suggest installing Bootstrap with SASS, in this way mixins are separeted and easier to manage.
With this configuiration the breaking-point is in your _variable mixins, and the _navbar mixin just picks up the variable by default.
Overriding will work but it's probably neater if you keep coherency with bootstrap mixins.
Read the documentation that you yourself linked to!
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
I'm creating a responsive website using bootstrap.
When the browser window narrows, the columns should collapse.
The issue is, I want dropdowns to appear when I click on heading.
I've positioned the menu absolute so I can put the z-index above.
In full width, it looks fine:
When columns stack, the menu is pushed to the left
How can I position the menu beneath the centered menu heading text? One way I can think of is to set the position of the dropdown menu to the x y position of the heading text. Is that the only way?
<div class="col-md-1">
<div id="heading_practice">
<a href="#">
<h4>Practice Areas</h4>
</a>
<div class="menu_practice">
<p>test</p>
<p>test2</p>
</div>
</div>
</div>
<div class="col-md-1">
<div id="heading_about">
<a href="#">
<h4>About Us</h4>
</a>
<div class="menu_about">
<p>test</p>
<p>test2</p>
<p>test3</p>
</div>
</div>
</div>
CSS
/*Menu*/
#home, #heading_practice, #heading_about, #heading_contact {
position: relative;
text-align:center;
}
.menu_practice, .menu_about, .menu_contact {
position: absolute;
padding: 10px;
border: thin solid Silver;
background: rgba(0, 0, 0, 0.9);
color: white;
z-index: 1;
margin-left:20px;
text-align:left;
}
If you're using Bootstrap, then why not use Bootstrap-Dropdowns?
http://getbootstrap.com/components/#dropdowns
It also seems like you're building a navbar there, Bootstrap has that integrated aswell with well-working support for Dropdowns:
http://getbootstrap.com/components/#navbar
I am making a demo of pop up screen as show in image. I have some issue my triangle is look "v"..how to come pop up above the option button? can we make same as in show in above. My pop up come below the button. it should come above the button ?
.triangle {
position: absolute;
top: -15px;
left: 50%;
margin-left: -15px;
border-bottom: 15px solid #002952;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
}
.menu{
height:200px;
overflow:auto;
}
}
http://jsfiddle.net/jHjDL/1/
So I looked at your fiddle and this is the best edit I can come up with:
<div style='position:relative;'>
<div style='position:fixed; bottom:0px;'> Options
<div data-role="popup" id="menuPopUp">
<ul data-role="listview" class="menu">
<li data-icon="false">Edit
</li>
<li data-icon="false">Call
</li>
<li data-icon="false">SMS
</li>
<li data-icon="false">Edit
</li>
<li data-icon="false">Call
</li>
<li data-icon="false">SMS
</li>
</ul>
<div class="triangle"></div>
</div>
</div>
</div>
I took the liberty of adding some wrappers and pushing the options link to the bottom of the page so that the menu can pop overtop of it. JQuery UI handles this by itself, nothing special needs to be done to make it show up above the link, the link just has to be in the page somewhere that the menu can pop over.
After that I made a small change to the css to invert the arrow:
.triangle {
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -15px;
border-top: 15px solid #002952; /*<-- make it border top to make a down arrow */
border-right: 15px solid transparent;
border-left: 15px solid transparent;
}
Now it seems to do what you want it to do. One thing I have noticed is that when you re-size the window the position of the menu gets all funny. I think this is a quirk of the UI popup and can only be fixed if you use custom CSS to display it.