I've pasted all of the relevant html/css here: http://www.bootply.com/6YQGagMczD
My problem is that when in responsive mode, the button to open the navigation menu doesn't seem to align properly with the centered navigation menu items. It's off by what appears to be a few pixels.
You have padding-left of 5 pixels on the menu, but no margin on the menu icon itself.
What you're missing is:
.navbar-toggle {
margin-left: 5px;
}
I've created a new Fiddle showcasing this here.
EDIT
In your new fiddle, the misalignment comes from the fact that .navbar-toggle (created by Bootstrap) has a default margin-right of 15px. You'll need to override this by resetting it to 0, as such:
.navbar-toggle {
margin-right: 0;
}
Here's a new fiddle.
Hope this helps :)
Related
Okay, so I am trying to make a responsive navigation menu for my website. I am currently having trouble making this dang float property work. So I've taken a combination of https://www.w3schools.com/ and a YouTube tutorial to make a website that I envision.
Here is what I got so far (Link to my code is below in hyperlink to JS Fiddle)
https://jsfiddle.net/dcannon96/e9mgsLqd/
So if you actually look in the label attribute under the media and screen section where the max-width begins for pixels.
Take a look at this part of my CSS.
label {
display: block;
cursor: pointer;
/* float: right; */
}
My goal is to make my top nav bar menu to appear beneath the hamburger icon when in mobile/tablet form. When in desktop mode, my menu list is on the left side of the screen, but when I am in mobile, the float right DOES NOT bring the rest of the items beneath the top nav bar.
This is what I'm trying to do https://youtu.be/xMTs8tAapnQ?t=611 (video skips to 10 minute and 11 seconds in)
So you can see what I am talking about once you remove the /**/ comment from the float right and see the different results.
you have to add overflow:hidden to the menu so the top nav bar menu to appear beneath the hamburger icon
see this https://jsfiddle.net/dow2qLck/1/
.menu {
overflow:hidden;
text-align: center;
width: 100%;
display: none;
}
hi I uncommented the float:right property of .label and it was aligned to right.. Hope this what you're looking for. thanks
visit below link
https://jsfiddle.net/dow2qLck/1/777
I've been working with bootstrap 4 migrating from 3.x And Everything is working right now, except one issue I have with the header, I have a collapsed div, for the search, which one when being activated moves all the menu and is not a very nice experience for the user (Please ignore the ugly borders in the screenshots, they are for debugging purposes only).
This is the normal Menu
And when I click on the search Icon
I have another Div with the search form
And if we look closely we can see the size of the previous div is bigger, and all the items were moved to the left
UPDATE:
here is an animated gif of the issue:
https://i.gyazo.com/a19328136dea86aebf6566972d7855e5.mp4
Here is the Gist with the HTML layout code: https://gist.github.com/ricardojriosr/1aa3f0c77c4d6786b42cce6d03a9c154
How Can I fix this, so the menu doesn't change the size and move to the left the items? Thanks in advance.
Can you try adding
.collapsing {
position: relative;
height: 0;
overflow: hidden;
transition: height .35s ease;
}
in your CSS.
I am having difficulties making the vertical navigation menu to go all the way down to the footer of the page. I tried fiddling with it, but the closest i got is me setting a specific height for the .navbar, and that doesn't help me, since I want it to be responsive.
.navbar {
border: 0px;
text-align: center;
border-radius: 0px;
background-color: #F2E9E1;
}
I am guessing it has something to do with the navbar class.
Here is the entire code: https://jsfiddle.net/u3hf1jht/1/
I'm not sure what you mean by you wanting it to go all the way down to the footer? You could just set the height of the nav to 100% of the page height, if you want it to fill your entire page.
ul.nav {
height:100vh;
}
Just had a glance at your snippet of code, it seems you've stacked in navs into navbars, they are two different components in Bootstrap. I'd take another look at http://getbootstrap.com/components/#nav.
Additionally take a look at http://getbootstrap.com/javascript/#affix for positioning your navigation. The actual bootstrap side navigation is a visible example of this in action.
I was writing a page in bootstrap when I stuck an issue. I have made a menu-bar or a navbar in bootstrap. Just below the navbar there is a slider. But there is an extra space in between the navbar and the slider. When I debugged, I found that extra space was of the navbar.
How could I remove the white-space between navbar and slider so that they are attached to each other.
Here is a jsfiddle of it.
By default the bootstrap navbar includes a 20 pixel margin. If you remove the margin by overriding the default bootstrap css they will be connected.
Add this to your css:
.navbar{
margin-bottom: 0px;
}
Updated fiddle here: http://jsfiddle.net/DTcHh/3490/
Add some CSS:
.navbar {
margin-bottom: 0;
}
in your fiddle you have
.navbar {margin-bottom: 20px;}
so you could also override it inline directly inserting style in html-markup...
(you can set it to 0 or none)
this is my site. the theme is customizeit which is responsive.when viewed in mobile screen.the top menu comes as a dropdown with white blocks.cannot see the text items.please help me in this without losing the responsivenes.Thanks!!
On each <li> in the responsive dropdown menu, there is a text-align:left property on the CSS selector .tc-hover-menu.nav li which is in the CSS file blue.css.
Remove the text-align: left; from your CSS and the text will appear. Or you can change it to text-align: center; and you'll see the same results.