I'm using 3 navbar's one below the other and the first navbar is with link in the right.
My second navbar has logo towards right, and links towards left.
But I see that my logo doesn't come like the way I want. The second navbar takes the height of the logo.
What am I missing?
I made you a demo bootply demonstrating what I think youu're looking for.
It has 3 navbars, with a logo in the second, overlapping the third navbar.
Related
I need to have a system on two screens, I have two div "col-lg-6" each using a screen and that by shrinking the screen to 1, the second div becomes a right side floating. Some idea occurs to them. Thank you.
Why does my navbar jump a little to the right when a drop-down is selected? Looks like some padding is missing on :hover perhaps. Any help would be appreciated. Thanks
http://www.85widening.com/default.html
It has to do with Bootstrap hiding the vertical scrollbar on body when the modal opens. It occurs only when you have a fixed navbar and body/modal content that require vertical scrolling.
Based on what I recall and found, it's a bug with Bootstrap 3 that I don't believe was ever resolved based on this GitHub issue.
Most workarounds seem to involve JS to add padding-right (like 15px) to the navbar when the modal opens or to override the overflow: hidden property the modal-open class that Bootstrap adds to body when you open a modal. The downside of this is you will have two vertical scroll bars (ugly). Either add the workaround or remove the fixed navbar. I haven't moved on to Bootstrap 4 yet but maybe they've addressed this.
i want to know if it's possible with bootstrap, to create the header with the logo and others informations, and then the navigation bar.
But the logo won't be fixe, only the navagation bar will be when it will be at the top of the page.
Here an example of header i'm trying to do with bootstrap
This partly depends on what you mean by "Header".
Often the "jumbotron" class is used as a header like this:
<div class="jumbotron"><img src='logo.png'>My Cool Company</div>
And the navigation bar is an independent element, specifically a navbar. It can be fixed on the page (scrolls with content) or Static on the screen (stays at the top or bottom)
Nabber example (always at the top):
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<a class="navbar-brand" href="#">Fixed top</a>
Link 1
Link 2
</nav>
You can find the other details on the Bootstrap page for Navbar:
Bootstrap Components navbar Placement
And the placement in this example is "navbar-fixed-top" so that it stays at the top of the screen, even when scrolling.
You may also want the navigation under the header, and want both to scroll until the navbar hits the top of the screen where it would then be fixed at the the top. This is sometimes called a sticky navbar. It can be done with jQuery, but at this time, I don't know of a way in Bootstrap without adding custom javascript.
Sticky Menu in jQuery - answer
If you do want the second option, without jQuery, ask another question on how to use Javascript switch from Fixed to Static when scrolling past the top of the screen.
thank you for your answer, but i think it s not my question, and i think my solution is not related to jumbotron.
if you look at the link i have give below, you can see that the logo of the site (w3school.com) is on the top when we are on the top of the page.
when we scrool down, this logo will disapear and only the nav bar (home, html, css, ...) will stay at the top.
I want the carousel slider with the 3rd image to be half displayed and on click the right side navigation icon the 3rd image need to be displayed first and rest 2 images need to be displayed
What you are looking for is Lemmon carousal
Check this out. Will be very useful
http://jquery.lemmonjuice.com/plugins/slider-variable-widths.php
This is not a coding question but rather a quick stop for directions.
I am looking into using Bootstrap framework for my next project. Bootstrap 3 official site has a great selection of default templates, but it seems to me they all have the same flaw -- I'll explain below.
One of the best responsive design features if a combination of JS and CSS media queries to take a regular, across the top, navigation and turn it into a hidden (on click) expand/collapse menus. This is great, BUT, all of the examples simply drop the menu links below each other and while it looks OK on a phone, it looks a bit ridiculous when a link with a single word, for example "About", is placed in a div of its own 768px wide.
A much nicer solution is to have that left or right sliding menu bar that pushes or overlaps the content of the site. Unfortunately there are not too menu of such examples, or at least I was not able to locate them.
This is where I need some help -- any basic templates with preferably right side menu on for smaller viewport browsers?
Here's an example right off-canvas navbar that may work for you...
Most of the off-canvas examples I've found push a sidebar off-canvas, but the top navbar is still collapsed into the usual vertical nav.
However, this example adjusts the navbar into a sliding right sidebar on smaller devices:
https://codeply.com/p/KDMFdhc6c8 (Bootstrap 3.x)
You could also consider switching over to Foundation (I've use bootstrap and foundation frameworks for several years and bout area great, one usually fits a project better than the other, depending on the needs).. Foundation has a native off-canvas component and it works very well (both left and right side off-canvas is available!)
foundation.zurb.com/docs/components/offcanvas.html