Im not really a pro in bootstrap. Im trying to set a bootstrap navbar menu with dropdowns, I found on line a great exemple: mega dropdown menu that actually satisfies my needs [the link to mega dropdown menu]15351 . The problem is, when I try to add another menu element (dropdown), the dropdown is displayed in a wrong position ! (under an other existing menu element). I tried editing the css but I haven't achieved my aim yet !
To test what Im talking about you try to add a drop down menu element and see what happens.
I would appreciate it if you guys could help me with that.
place the dropdown between last endindgs.
</li>
<li class="dropdown dropdown-large">
-----place any lists-----
</ul>
</div><!-- /.nav-collapse -->
Related
I am trying to use the use Parent Menu Item As Toggle For Submenu using the code mentioned here. Doesn't seem to work for me. Any help?
Code for mobile menu
I am using Vue.js (which I don't think have anything to do with this issue) and a color picker package vue-color. What I want to achieve is following:
A button or rectangle element have color as selected color when clicked show a menu type dropdown with color picker. User can pick color here, and when they click outside color picker, it collapse. I tried doing this with bootstrap dropdown and everything works fine except when I click to pick color the menu collapse(refer to following code):
<ul>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><sketch-picker v-model="colors" /></li>
</ul>
</li>
</ul>
Above code shows this output, which is same as what I want to achieve but on first click only it collapse, hence user couldn't tune it.
On exploring I found below link, but am not able to translate it into vue.js
https://github.com/react-bootstrap/react-bootstrap/issues/1490
I also tried using select and putting color-picker in it's option, but then no color-picker comes and only r, g, b values are shown.
I also tried to make my own div and show-and-hide using vue. But instead of coming over base div it takes it own space even with z-index (I know this is workable but I couldn't get this working). Any help would be appreciated
I want to add a logo to the top right corner of my morea generated pages.
I am not sure which file I need to modify or how, can you please advise?
Morea is based upon Bootstrap 3.3, so you'll need to use those CSS classes to provide a right-justified logo.
To insert a logo, you need to modify the code for the items in the navbar, which is located in the core.html file. Here is the code for the default navbar:
https://github.com/morea-framework/core/blob/master/src/_layouts/core.html#L69-L89
What you'll need to do is create a new itemized list right after the current list that creates a right justified navbar item. For example, I inserted this code starting on line 90 of that file in one of my local Morea sites:
<ul class="nav navbar-nav navbar-right">
<li>LOGO</li>
</ul>
And when I re-run morea-run-local.sh, the navbar looks like this:
Obviously, the formatting needs help, but you can investigate the Bootstrap 3.3 docs to figure out the best way to display your logo. Good luck!
Please see the menu image bellow
i'm using bootstrap navigation menu here .when if its items are few its child pop up menu goes as this .i'm tried a lot but not found a good result ,this menu items generated by dynamically from asp.net
help me to solve this .
I am in need of a dropdown-submenu using Bootstrap 3.
There are questions like this all over the place, one in particular that got me closer is this one: Bootstrap 3 dropdown sub menu missing
However, the answers there display the dropdown to the right of the current menu. I need to display the dropdown within the current menu, just sliding the rest of the nav down when open.
Here is a bootply with what I have so far: http://bootply.com/91787
Currently the submenu is just overlaying the current dropdown... I need the submenu to push the rest of the dropdown elements down when open. How can I achieve this? Any help getting the dropdown to activate on click instead of hover would be helpful as well, but the main question is more important.
Like this ? I´m not sure if I understood your question right.
http://bootply.com/91794
Edit:
Quite simple, I hope this is what you want:
.dropdown-menu {position: relative;}
http://bootply.com/91800
Jeff Mould solved this beautifully.
Git: https://github.com/jeffmould/multi-level-bootstrap-menu
Nav Demo: http://theboot.fenwickmedia.com/