I'm trying to understand what exactly data-toggle="dropdown" does in my nav bar and it seems that the primary purpose is for touch screen surfaces, so that when the nav link is clicked, the menu stays open unlike a menu upon hover. (Please correct me if I'm wrong) to my rudimentary knowledge it changes the link to an active link??
So based on the code below when I click on the navbar link which is publications, it stays highlighted, how do I change the color of this highlight?
What line of CSS in bootstrap do I edit?
Thanks!
Update:
Using
.dropdown-toggle:focus {color:red;text-decoration: none;}
on its own doesn't work, I have to add '!important' to the line otherwise it doesn't take effect, maybe conflict with the bootstrap code? Also, what I'm actually looking to do is not the text colour but the background colour. using background:color doesn't work at all for me.
<li class="dropdown">
Publications
<ul class="dropdown-menu">
<li>Submissions</li>
<li>News</li>
<li>Code of Conduct</li>
<li>Useful Links</li>
</ul>
</li>
I assume, if you are looking for color to stay till your dropdown is open, you should use pseudo focus
.dropdown-toggle:focus {
color:red;
text-decoration: none;
}
And if you are looking to change on hover, you can do it using the below code.
.dropdown-toggle:hover{
color: green;
text-decoration: none;
}
You can see in the below example.
On hover it's green and on focus it's red
.dropdown-toggle:focus {
color: red;
text-decoration: none;
}
.dropdown-toggle:hover {
color: green;
text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<li class="dropdown">
Publications
<ul class="dropdown-menu">
<li>Submissions</li>
<li>News</li>
<li>Code of Conduct</li>
<li>Useful Links</li>
</ul>
</li>
Related
I'm starting to learn a few basics with nuxt & vue.
I'm basically building a little list of elements that you can click and will expand with an image or some other content.
What I made so far
is an homepage with the list (like the first image)
and 3 other pages : /about, /projects, /contact
Here is the demo with images :
As soon as I click the first link, an image appears, and everything is moved down to the bottom. The URL is updated with the corresponding url (here, /about)
What I would like to achieve:
So far it's working fine and I can naviguate on my website.
But as the images suggests, I would like the differents elements of the menu to move with an animation to the bottom on the page transition to the different pages, it would take them (let's say) 2 seconds to go their next position in the next page.
It would look something like that : https://codepen.io/pbouigue/pen/KKVxbYa
when you click a dropdown menu like first videothe menu expends and everything is moved down.
The issue with that is that the url is not updated and considered to move to another page (in the case it should be exemple.com/first-video
<template>
<div class="container">
<transition-group name="list">
<nuxt-link to="about" key="about">First item - about</nuxt-link>
<img src="../assets/ours.png" alt="">
//these two remaining items should have an animation when they move to the bottom of the image
<nuxt-link to="projects" key="projects">Second item - projects</nuxt-link>
<nuxt-link to="contact" key="contact">Last item - contact</nuxt-link>
<transition-group>
</div>
</template>
<style >
img{
display: block;
width: 40%;
}
a{
display: block;
color: orangered;
font-family: 'Courier New', Courier, monospace;
}
</style>
and my /about :
<template>
<div class="container">
<transition-group name="list">
<nuxt-link to="about" key="about">First item - about</nuxt-link>
<nuxt-link to="projects" key="projects">Second item - projects</nuxt-link>
<nuxt-link to="contact" key="contact">Last item - contact</nuxt-link>
<transition-group>
</div>
</template>
<style >
img{
display: block;
width: 40%;
}
a{
display: block;
color: orangered;
font-family: 'Courier New', Courier, monospace;
}
</style>
Do you have any help on how to achieve that? Maybe there is an easier way to do it, but since I'm all new and learning by myself, I would have loved some clues or a little help.
I read about transition-group and this css, but somehow, I can't manage to make it work...
.list-enter-active,
.list-leave-active {
transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateX(30px);
}
because actually this :https://vuejs.org/guide/built-ins/transition-group.html#move-transitions
does exactly what i would like to do : move elements down in an animation, but I would like this to happen on a page transition in order to have to url updated.
Maybe I should look for https://router.vuejs.org/guide/essentials/nested-routes.html ?
I have:
<li class="nav-item">
<b-popover
target="search-button"
placement="topleft"
title="Search"
triggers="click"
content="Placement"
container="nav-container"
>
<template slot="title">Interactive Content</template>
<template slot="content">Interactive Content</template>
</b-popover>
<a class="nav-link" href="#" title="Popover Title" id="search-button">
<i class="material-icons md-48">search</i>
</a>
</li>
I want to add a class to the popover, but ideally have it scoped to this component. When I try to do:
<style scoped>
.nav {
background: white;
border-top: 0.1px solid silver;
}
.nav-pills .nav-link {
border-radius: 0;
}
.popover {
width: 100%;
background: red;
}
</style>
It seems to have no impact on the actual popover.
Version 2.0.0-rc.26 (which is to be released soon) adds support for tooltip/popover variants as well as applying custom classes to the tooltip/popover root element.
You can see a preview at https://bootstrap-vue.netlify.com/ (and will appear at https://bootstrap-vue.js.org/ once released)
Its not possible to give class to <b-popover>, you can read here.
But as I mentioned in comment you can use querySelector and give class or styling.
Cheers.
I'm trying to use the Trix WYSIWYG editor on a MaterializeCSS page. Unfortunately the formatting doesn't work since MaterializeCSS overwrites HTML elements like UL with styles like "line-style-type: none". It does provide a style ".browser-default" to reset this but since the HTML elements in the content area are created dynamically I can't really use it.
This is an example snippet:
<trix-editor class="formatted_content" input="xx" contenteditable="" trix-id="1" toolbar="trix-toolbar-1">
<ul>
<li>Test Item</li>
</ul>
</trix-editor>
Would anyone know how to make this work and render the UL and LI inside the TRIX-EDITOR with a proper style?
You could override the style only for elements inside the <trix-editor> tag.
Example:
<style>
trix-editor ul:not(.browser-default)>li {
list-style-type: disc;
display: list-item;
}
trix-editor ul:not(.browser-default) {
list-style-type: disc;
display: block;
padding-left: 40px;
}
</style>
<trix-editor class="formatted_content" input="xx" contenteditable="" trix-id="1" toolbar="trix-toolbar-1">
<ul>
<li>Test Item</li>
</ul>
</trix-editor>
<ul class="browser-default">
<li class="browser-default">Materialize Browser Default</li>
</ul>
<ul>
<li>Materialize</li>
</ul>
See this jsfiddle for a demo:
https://jsfiddle.net/1jf9m2sp/
I'm learning angular2 and looking to implement a collapsible sidebar, similar to https://almsaeedstudio.com/themes/AdminLTE/index2.html, in Angular 2? I tried looking up examples but couldn't find any. Can you provide examples or documentation for it?
You could use ng2-bootstrap:
https://valor-software.com/ng2-bootstrap/#/accordion
You can also check in the source code how it's implemented:
https://github.com/valor-software/ng2-bootstrap/tree/development/components/accordion
Since you want to do it with Bootstrap, you can do it with Bootstrap collapse.
http://codepen.io/zurfyx/pen/ygaGyb
The idea behind this solution is the following:
Have your collapsible content inside a specific class, we called it collapseMenu. We also need a class that will indicate whether it is hidden or not. Bootstrap already provides it for us collapse.
<li>Icon <span class="collapse collapseMenu">Home</span></li>
Next we need the toggler, the hamburger icon that is. It requires a data-toggle to indicate the class that it has to toggle on each click and a data-target to know the element(s) that has to target, collapseMenu.
<button data-toggle="collapse" data-target=".collapseMenu">Hamburger icon</button>
The CSS part is not a big deal, and you can do it in various ways. I like the CSS3 flexbox approach.
Our page (specifically .container), will be a flex with direction row.
.container {
display: flex;
flex-direction: row;
}
Then we'll set the right panel to take as much space as it can, so as when the content is toggled, it shrinks:
.main {
flex: 1;
}
Complete working version:
HTML
<div class="container">
<div class="left-panel">
<ul>
<li>Icon <span class="collapse collapseMenu">Home</span></li>
<li>Icon <span class="collapse collapseMenu">Contact</span></li>
</ul>
</div>
<div class="main">
<button data-toggle="collapse" data-target=".collapseMenu">Hamburger icon</button>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
}
ul > li {
display: block;
}
.collapse.in {
display: inline-block;
}
.container {
height: 100vh;
display: flex;
flex-direction: row;
padding: 0;
}
.left-panel {
background-color: grey;
}
.main {
background-color: black;
flex: 1;
}
How do you get a bootstrap navbar ul to be centered, but ignore the space occupied by another ul, so that the center is truly centered, and not shifted?
I have two unordered lists in my bootstrap navbar. I want one of them (#clause) to be centered, and the other (#social-icons) to be on the right.
But what happens is the centered one is slightly to the left of absolute center because the one on the right takes up some of the space.
Thus the centering is calculated based on the remaining space, rather than the entire width
Here is my code so far:
Currently, I have the right-aligned list within the other list. They should be two separate lists. But when I separate them, I run into the problem of each of them wanting their own rows.
I am using bootstrap 3
css
#navbar {
#clause {
text-align: center;
li {
font-size: 1.6em;
float: none;
display: inline-block;
*display: inline;
*zoom:1;
vertical-align: top;
}
}
#social-icons {
}
}
navbar HTML
<nav class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<ul class="nav nav-tabs" id="clause">
<li></li>
<li></li>
<li></li>
<ul class="nav navbar-right" id="social-icons">
<li></li>
<li></li>
</ul>
</ul>
</div>
</div>
</div>
</nav>
If you want to ignore the space occupied by the list #social-icons make its position absolute.
Doing so will give the whole width to #clause
CSS
#social-icons {
position: absolute;
right:0;
top:0;
}