I am using the Bootstrap 3 custom buttons but can't for some reason change the brand text color nor the dropdown triangles. I've tried a couple of things, but still no luck...
<div class="container">
<div class="row" style="margin-top: -30px;">
<ul class="nav nav-tabs" role="tablist">
<li class="dropdown" style="margin-right: 70px; margin-left: 60px;" >
<a class="btn btn-inverse :active" data-toggle="dropdown" href="#">
Wristbands <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
<li class="dropdown" style="margin-right: 70px;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Hawaii <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
In your example, I don't see any text in the navbar-brand div. Is that what you're talking about?
Anyhow, to answer your question, if you have text in navbar-brand, you'd use something like:
.navbar-default .navbar-brand {
color: blue !important;
}
And for the dropdown arrows, something like:
span.caret {
color: red;
}
Related
i have just started learning web development and I have been facing a few issues related to the alignment of tags, buttons and icons.
Here are the issues I'm facing:
The brand name is not in line with the a tags. i tried display:inline; in every class but its not working.
the social media tags are hanging in mid air, I want them to be in line with the a tags. Again, i tried reducing the margin, padding and using the inline command but nothing seems to be working.
the bootstrap search button is also hanging mid air. I want all the above three to be in line.
Here's a screenshot of the page.
And here's the code
header {
background: #669999;
color: white;
padding: 5px 5px 5px 15px;
}
.fontsize {
color: white;
margin: 0px 0px 0px 10px;
font-size: 25px;
padding: 5px;
}
.icon {
float: right;
list-style-type: none;
margin: 0px 10px 0px 10px;
padding: 5px;
display: inline;
}
body {
margin: 0px;
}
.colors {
margin: 5px 10px 5px 10px;
padding: 10px;
color: white;
}
a:hover.colors {
color: black;
text-decoration: none;
}
.picturefont {
font-size: 25;
font-style: italic;
}
.whitespace {
padding: 10px;
margin: 50px;
}
#margin {
margin: 0px;
}
.frontpageimage {
width: 90%;
display: inline;
border: 1px solid black;
}
<h1 class="fontsize"> Brand name </h1>
<nav>
<a class="colors" href="home.html"> Home </a>
<a class="colors" href="contact.html"> Contact </a>
<a class="colors" href="recipe.html"> Recipes </a>
<a class="colors" href="order.html"> Order </a>
<ul>
<li class="icon">
<img src="icon-insta.png">
</li>
<li class="icon">
<img src="fb-icon.png">
</li>
<li class="icon">
<img src="phone-icon.png">
</li>
</ul>
</nav>
<form id="margin" class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<!-- <li>Link</li> -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span
class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<body>
<div class="row">
<div class="col-sm-2 whitespace picturefont">
<a href="recipe.html">
<img class="frontpageimage" src="oreo-cake.jpg"></a> Chocolate Cake</div>
<div class="col-sm-2 whitespace picturefont">
<a href="recipe.html">
<img class="frontpageimage" src="kitkat-cake.jpg"></a> Rasberry Sponge Cake
</div>
<div class="col-sm-2 whitespace picturefont">
<a href="recipe.html">
<img class="frontpageimage" src="green-cake.jpg"></a> Red Velvet Cake</div>
<div class="col-sm-2 whitespace picturefont">
<a href="recipe.html">
<img class="frontpageimage" src="KitKatCake3.jpg"></a> Mango Rose Tart
</div>
</div>
<div id="slider">
<div id="slider2">
<img id="choclatecake" src="oreo-cake.jpg" alt="Moist Chocolate Cake" />
<img id="choclatecake" src="kitkat-cake.jpg" alt="Moist Chocolate
Cake" />
<img id="choclatecake" src="green-cake.jpg" alt="Moist Chocolate Cake" />
<img id="choclatecake" src="KitKatCake3.jpg" alt="Moist Chocolate
Cake" />
</div>
</div>`
Forgive me for the improper format but I'm new here. Hoping to find some answers. Thanks
From my experience, the best way to organize the layout of a web page is to use tables (rows and columns). Start by sketching the layout and imagining boundaries around the items of your website.
I suggest that you use Bootstrap stylesheet by including the CSS file at your page header
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Then using the CSS classes row and .col-md-* for div containter element classes.
Refer to the page (https://getbootstrap.com/docs/3.3/css/#grid-example-basic) for code examples.
Your structure might be something like the following:
<div class="row">
<div class="col-md-8">Brand name</div>
<div class="col-md-4">social media tags</div>
</div>
<div class="row">
<div class="col-md-6">navigation</div>
<div class="col-md-6">search</div>
</div>
<div class="row">
<div class="col-md-12">Body</div>
</div>
You need to put h1 tag inside nav tag.
You have closed the nav tag before starting form and you have another closing nav tag later.
Same reason as above.
Try it like this:
<nav>
<h1 class="fontsize"> Brand name </h1>
<a class="colors" href="home.html"> Home </a>
<a class="colors" href="contact.html"> Contact </a>
<a class="colors" href="recipe.html"> Recipes </a>
<a class="colors" href="order.html"> Order </a>
<ul>
<li class="icon">
<img src="icon-insta.png">
</li>
<li class="icon">
<img src="fb-icon.png">
</li>
<li class="icon">
<img src="phone-icon.png">
</li>
</ul>
<form id="margin" class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span
class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</nav>
#Student, you have a lot going on here, but most of your issues revolve around malformed HTML. So let's go through your issues one-by-one.
1) The brand name is not in line with the a tags. i tried
display:inline; in every class but its not working.
I'm only seeing your use of display:inline in a couple of your classes, but not on the brand name. Regardless, Bootstrap already has a brand with links built in for you. As you can see in the code below.
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button class="navbar-toggle collapsed" aria-expanded="false" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Contact</li>
<li>Recipes</li>
<li>Orders</li>
</ul>
...
2) The social media tags are hanging in mid air, I want them to be in
line with the a tags. Again, i tried reducing the margin, padding and
using the inline command but nothing seems to be working.
To get these to go on the same line, you can nest the form and the social media icons in a div tag that pulls both of them to the right of the navigation bar using the navbar-right class. To make sure they're on the same line, use Bootstrap's float class: pull-left and pull-right. You'll need to add padding to the top of the a tags using padding-top CSS property. I've done it to one, so you can get an idea of how.
<div class="navbar-right">
<form class="navbar-form pull-left">
<div class="form-group">
<input class="form-control" type="text" placeholder="Search">
</div>
<button class="btn btn-default" type="submit">Submit</button>
</form>
<ul class="nav navbar-nav pull-right">
<li>
<img src="fb-icon.png">
</li>
<li>
<img src="phone-icon.png">
</li>
<li>
<img src="icon-insta.png">
</li>
</ul>
</div>
You'll just need to reapply some of your classes.
I want user to be able to select everything within Morphological Transformation (Erosion, Dilation, Opening, Closing), but not 'Morphological Transformation' itself. Thank you for every answer!
HTML Code:
<div class="container">
<div class="row">
<hr>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Select Pre-Processing Method <span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li>Normalisation</li>
<li>Canny Edge Detection</li>
<li>Smoothing</li>
<li></li>
<li class="divider"></li>
...
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Morphological Transformation</a>
<ul class="dropdown-menu">
<li><a>Erosion</a></li>
<li><a>Dilation</a></li>
<li><a>Opening</a></li>
<li><a>Closing</a></li>
</ul>
</li>
...
</ul>
</li>
</ul>
</div>
</div>
You can disable anchor events and keep hover effects by using this:
.disabled-link:hover{
background: red;
}
.disabled-link:active{
pointer-events: none;
}
Test
It is usable for all modern browsers:
click!
I am trying to have Horizontal drop-down menu like one in here flipkart.com they have floating sidebar menu on hover.
This is my try [With Responsive Design]:-
JSFIDDLE Link - http://jsfiddle.net/QSFPK/
<div class="row-fluid">
<div class="span12">
<div class="span3">
<ul class="nav nav-tabs nav-stacked">
<hr style="margin: -1px;">
<li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a>
<ul class="dropdown-menu rightMenu">
<li><a id="logout" href="#">Sign Out</a></li>
</ul>
</li>
<li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a>
<ul class="dropdown-menu rightMenu">
<li><a id="logout" href="#">Sign Out</a></li>
</ul>
</li>
<li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a>
<ul class="dropdown-menu rightMenu">
<li><a id="logout" href="#">Sign Out</a></li>
</ul>
</li>
<li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a>
<ul class="dropdown-menu rightMenu">
<li><a id="logout" href="#">Sign Out</a></li>
</ul>
</li>
<li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a>
<ul class="dropdown-menu rightMenu">
<li><a id="logout" href="#">Sign Out</a></li>
</ul>
</li>
<div class="clearFix"></div>
</ul>
</div>
<div class="span9">
<h2>Hello World</h2>
<h2>Hello World</h2>
<h2>Hello World</h2>
<h2>Hello World</h2>
<h2>Hello World</h2>
</div>
</div>
</div>
and here is my CSS :-
.rightMenu {
position:relative;
float:right;
}
.right-caret {
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-left: 4px solid #000000;
display: inline-block;
height: 0;
opacity: 1;
vertical-align: top;
width: 0;
}
.right {
float: right;
}
JSFIDDLE Link - http://jsfiddle.net/QSFPK/
Any help would be great.
Thanks
If you add some sort of class to the list items that have dropdowns, then you can use the css :hover selector to open up the menu with css such as:
li.dropdown:hover .dropdown-menu {
display:block;
}
Here's an edited version of your code, but obviously you'll have to style it so there's no gap causing the mouse to go outside of the <li> item.
http://jsfiddle.net/QSFPK/2/
I created a Bootstrap dropdown using this code:
<div class="dropdown" style="margin-bottom: 20px;">Ordered by
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="primary">Random</span></a>
<ul class="dropdown-menu" role="menu">
<li>Random</li>
<li>Earliest</li>
<li>Latest</li>
</ul>
post.
</div>
But as you can see, the dropdown isn't aligned with the link:
How can I get it to align, and if possible, also display the white triangle on top pointing to the link?
JSFiddle example
Is this what you are looking for?
http://jsfiddle.net/t75g5/
<span>Ordered by<span>
<div class="dropdown mydropdown" style="margin-bottom: 20px;">
<a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#"><span class="primary">Random <b class="caret"></b></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>Random
</li>
<li>Earliest
</li>
<li>Latest
</li>
</ul>post.</div>
Im not sure is this an issue with the content below it, or nav-collapse itself, But the only way I can seem to replicate the issue in firefox is by changing float:left to float:none in the code below. Basically when I toggle the menu the content below it doesnt get pushed down in IE9
.navbar .navbar-inner .nav-collapse.collapse
{
background: #6E2E8F;
border-radius: 5px 5px 5px 5px;
float: left;
height: 0px;
margin-bottom: 15px;
padding: 0;
width: 100%;
}
.navbar {overflow: visible;}
Here is the outputted html...
<div class="navbar">
<div class="navbar-inner">
<a data-target=".nav-collapse" data-toggle="collapse" class="brand visible-phone"> Categories</a>
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>***CONTENT***</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span>Start Shopping
</span><span class="active_downarrow"></span></a>
<span class="sub-menu-response">
<ul class="dropdown-menu" > ***CONTENT*** </ul>
<ul class="dropdown-menu" > ***CONTENT*** </ul>
<ul class="dropdown-menu" > ***CONTENT*** </ul>
<ul class="dropdown-menu" > ***CONTENT*** </ul>
<ul class="dropdown-menu" > ***CONTENT*** </ul>
</span>
</li>
<li> ***CONTENT*** </li>
<li> ***CONTENT*** </li>
<li>***CONTENT*** </li>
</ul>
</div>
</div>
</div>
Here is the link to the site... http://bc_mobile.hailstormcommerce.com/
You can try adding this css class:
.nav-collapse.collapse.in {
height: auto !important;
}
Because when you drop-down the navigation, bootstrap gives it an initial width fixed.