My dropdown menu made using bootstrap is hiding behind the slider that I made. I want it to show in front.
I have tried using:
z-index
overflow:visible
position:relative
according to the various solutions posted online under a similar problem. I have found no success with any of the solutions I tried.
I have a JSFiddle here https://jsfiddle.net/8wq0ptrw/
remove the overflow:hidden from your nav-bar class. I hope this will help you.
.nav-bar {
list-style-type: none;
margin: 0;
padding: 0;
}
You can see it by removing display: none; from .navbar and .collapse.
I believe bootstrap provides a hamburger menu icon that you need to implement where you click it to remove the display: none; on these elements and show the the dropdown menu.
Related
This may seem trivial, but I am trying to add an icon to a bootstrap tab but I'm having style issues.
Looking for a CSS solution with the following:
Icon must float to the right of the link.
CANNOT put the icon inside the anchor tag, they must remain at same level.
<a></a><i></i>
jsfiddle
If anyone can solve this, it'd be greatly appreciated.
Because Bootstrap styles the a inside the tab li, you must then redesign the tab to apply the style not to the a but to the li.
If you can't do that, then you should wrap the icon inside the a.
You can try add:
display: inline-block;
to your a inside the li tag.
nav>li>a {
position: relative;
display: inline-block;
padding: 10px 15px;
}
I want to be able to turn a simple unordered list into a nice menu when on mobile:
<ul class="jumpToList list-inline">
<li>Buttons</li>
<li>Select</li>
<li>Input</li>
<li>Checkboxes & Radios</li>
<li>Switches</li>
</ul>
So when I'm on mobile the above gets turned into a simple menu with the 3 bars when then folds down the links.
Similar to how the Bootstrap navigation menu works, but so it doesn't conflict with this.
I ideally want to use the built in stuff with Bootstrap for this, good example of what i am after:
http://ux.mailchimp.com/patterns/forms
If you shrink the browser you will see that list turn into a menu on mobile.
Thanks
Some simple modifications to your HTML, media-queries and Javascript should allow you to replicate this behaviour.
I would suggest that you begin by creating the media-query to alter the applied styles based on device width.
CSS - Mobile first
.list-inline {
display: none;
visibility: hidden;
}
.list-inline-active {
display: block;
visibility: visible;
}
.list-inline li {
display: block;
}
#media (min-width: 600px) {
.list-toggle {
display: none;
}
.list-inline {
display: block;
visibility: visible;
}
.list-inline li {
display: inline-block;
}
}
HTML - Add toggle button/icon
<button class="list-toggle">Show list</button>
Javascript/jQuery
$('.list-toggle').click(function(){
$('.list-inline').toggleClass('list-inline-active');
});
This method simply uses a button to toggle a class on the unordered-list element. The toggled class contains styles to make the list visible on mobile.
I've created a simple JSFiddle example to show this in action.
It's worth noting that this behaviour is almost entirely replicable without the use of Javascript at all. It would involve the use of checkboxes and the ':checked' pseudo selector. However Bootstrap 3 does use Javascript.
I hope this helps.
I'm having trouble getting my dropdown menu right.
Two issues:
1. In Firefox, the dropdown appear left of the header block, and not under the correct menu-item.
2. In browsers where it appears correctly, it pops under the carousel when it has scrolled.
Problems (and code) can be seen here: http://vizit-dev.mooo.com
Can anyone point me in the right direction? I don't have much experience in CSS.
Start from:
.nice-menu li { } change display: inline to inline-block;
set z-index for ul.nice-menu li { } higher than
.views_slideshow_cycle_teaser_section_banner_carousel-block { }
Im trying to create a menu bar which uses image buttons.On my menu bar, I can see my images on it but I can not click them. I used text-indent: 100%; white-space: nowrap; overflow: hidden; in my css file to hide links text. My link text became hidden but links became inactive. Moreover i tried text-indent:-9999px; but result was same. I could not find the problem maybe my html or css structure is wrong. Could you pls check it ?
I updated html and css file on jsfiddle
jsfiddle
try this:
nav ul li a{display: block}
Its Working
nav ul li a
{
display: block
}
I´m trying to create a menu with the list 'ul'.
The problem I´m facing is:
The submenu doesn´t appear at the top of its corresponding menu link, but, below.
You can see it at this link:
http://jsfiddle.net/6r6e8/
Thanks.
Try including a top value in your CSS:
ul.menu ul {
top: 0;
}
You could add margin-top: -21px to your ul.menu ul styles as a quick fix.