Here is my codepen.
Question 1
How I can change the background and text colour of the drop down menu my navigation bar on my webpage? Just for answer purposes I wanted the text to be white and the background colour to be grey. (I'm not asking for anyone to do it for me just trying to make things clear)
Question 2
At the moment in time within my coding, when I hover over the navigation bar text in the drop down menu at the bottom of the box an underline appears. However, I want the underline to appear under each text of each webpage when the user hovers over it instead of at the bottom of the navigation bar drop down menu box.
Any helpful links with identifying classes?
In addition, in terms of the the navigation bar html I'm finding it hard to identify the class name for what does what therefore, when I do my CSS I can easily identify what class I need to write. As a result of this, I was wondering if anyone has any good helpful tutorial links which can help me with this.
HTML code
<html>
<head>
<title>Liam Docherty | London Web Developer & GFX designer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#"><img src="http://placehold.it/60x60" alt="Your 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 class="dropdown">
About Me <span class="caret"></span>
<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>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<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>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section class="section1">
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section class="section2" id = "section2">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="contact-me" class="contact_section">
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
<footer></footer>
</html>
CSS code
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: center;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color:red;
border-radius: 9px;
transition:all .2s;
}
.navbar.navbar-default ul li a:hover {
color: red;
}
.nav.navbar-nav, .nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
a:hover {
color:red;
text-decoration:none;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section {
position: relative;
}
.section1 {
height: 90vh;
background-color: #FFFFFF;
text-align: center;
}
.section2 {
height: 95vh;
background-color: #A59E8C;
text-align: center;
color: white;
}
.contact_section {
height: 93vh;
background-color: grey;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
footer {
height: 5vh;
}
</style>
Question 1 Answer:
For question 1 answer read the https://stackoverflow.com/users/7650566/rcruey 's answer. By that system, you can add background color and text color.
Note: Background color and the color are the basics of CSS. If you have enough time, you need to learn more about CSS first.
Question 2 Answer:
To underline under each text of each webpage when the user hovers over it. It's so simple. Just make the code for your paragraph and the link.
p, a{
text-decoration: none;
}
p:hover, a:hover{
text-decoration:none;
}
and avoid this code for navigation bar just add this for navigation bar menu specially, which is done in question 1:
.dropdown .dropdown-menu {
background-color: grey;
}
.dropdown .dropdown-menu a{
color: white;
}
.dropdown .dropdown-menu a:hover{
text-decoration: underline;
text-decoration-color: black;
}
And finally for suggestion :
I want to say that, you may be try to overwrite the bootstrap class in your code.
For this, use inspect element of Chrome or Firefox. By clicking on the above field and click Inspect element. Then you will see which class or id's are used for the above style-sheet.
And to get perfect result using bootstrap over-righting... in your index.html page, correctly link up the styles. Try to link up bootstrap.min.css first and then add your own style.css. This will give you a perfect result.
When it comes to adding color inside of elements you want to make sure you are specific with the details. For example with what you gave me I figured this out.
Insert this in your CSS document and tell me if this is what you mean. If so just make sure you have one element (Menu for example) selected for the background color, and then the next element (navbar or a links for another example.) To color the next element.
Also for anenter code here easy fix for underlining font, just use a text-decoration command. Solid border-bottom 1px etc. I hope this helped.
.dropdown .dropdown-menu {
background-color: grey;
}
.dropdown .dropdown-menu a{
color: white;
}
.dropdown .dropdown-menu a:hover{
text-decoration: underline;
text-decoration-color: black;
-moz-text-decoration-color:black;
}
Related
I'm trying to build a drop-down menu with the template of this menu: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar
However, in my browser, the dropdown menu is slow to respond at hover, if it does at all, what is the any reason for this?
Note: The code (functionality and design of drop-down menu) is working but it's very flickery when it catches the hovering, as opposed to the w3Schools example.
A very specific example of the problem is that when I move the mouse slightly away from hovering and back into hovering, the hovering doesn't activate drop-down feature at all.
SCSS (Partials contain only mixin & variable declaration for simple design stuff, not expected to influence performance very much.) :
#import 'color';
#import 'box-shadow';
#import 'border';
#mixin dropdown-template() {
ul {
list-style-type: none;
margin: -10px 150px 0 0;
padding: 0;
overflow: hidden;
}
li {
float: right;
}
li a, .dropbtn {
display: inline-block;
color: $netflix-black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: $netflix-red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
max-width: 200;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
}
& the SCSS later directly compiled to CSS-file linked in CSS:
#ULTRAHEADER {
background: $linear-gradient-facebook-dark;
& h1 {
text-align: left;
margin-left: 40px;
}
#include dropdown-template;
}
& relevant HTML:
<header id="ULTRAHEADER">
<h1>Principles</h1> <!-- The Meta-Title above 4 AoL -->
<ul>
<li class="dropdown"><a class="dropbtn">Spiritual</a>
<div class="dropdown-content">
<a href="markups/IntPrinHTML/BoostOdds.html">
Boost your odds of success through de-centralized principle-guided decision-making.
</a>
<a href="markups/IntPrinHTML/ApplyPrin.html">
Apply Principles in Comple Sub-systems of Reality
</a>
<a href="markups/IntPrinHTML/BoostOdds.html">
Learn, Grow, Evolve. Be Anti-Fragile.
</a>
</div>
</li>
<li class="dropdown"><a class="dropbtn">Relationship</a>
<div class="dropdown-content">
<a href="markups/IntPrinHTML/BoostOdds.html">
Boost your odds of success through de-centralized principle-guided decision-making.
</a>
<a href="markups/IntPrinHTML/ApplyPrin.html">
Apply Principles in Comple Sub-systems of Reality
</a>
<a href="markups/IntPrinHTML/BoostOdds.html">
Learn, Grow, Evolve. Be Anti-Fragile.
</a>
</div>
</li>
<li class="dropdown"><a class="dropbtn">Physical</a>
<div class="dropdown-content">
<a href="markups/IntPrinHTML/BoostOdds.html">
Boost your odds of success through de-centralized principle-guided decision-making.
</a>
<a href="markups/IntPrinHTML/ApplyPrin.html">
Apply Principles in Comple Sub-systems of Reality
</a>
<a href="markups/IntPrinHTML/BoostOdds.html">
Learn, Grow, Evolve. Be Anti-Fragile.
</a>
</div>
</li>
<li class="dropdown"><a class="dropbtn">Intellectual</a>
<div class="dropdown-content">
<a href="markups/IntPrinHTML/BoostOdds.html">
Boost your odds of success through de-centralized principle-guided decision-making.
</a>
<a href="markups/IntPrinHTML/ApplyPrin.html">
Apply Principles in Comple Sub-systems of Reality
</a>
<a href="markups/IntPrinHTML/BoostOdds.html">
Learn, Grow, Evolve. Be Anti-Fragile.
</a>
</div>
</li>
</ul>
</header>
Please ask for whatever other info you need, thanks
I have header that is moving when I scroll my page down. I have added several buttons to it, and they are moving with it.
My problem is that my drop-button is showing its content when I am not hovering over the button itself.
My code:
/*------------------------------------dropdown menu start*/
.dropbtn {
background-color: #B9B9B9;
color: white;
font-size: 30px;
font-weight:bold;
border: none;
cursor: pointer;
position: relative;
left: 300px;
top: -18px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
left: 300px;
background-color: #ffffff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
top: 18px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ffffff}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
color: #4d4d4d;
}
/*------------------------------------dropdown menu end*/
And a picture(black dot is a mouse location) :
What can I do to fix this?
Your problems run deep. I don't even really want to fix the entire menu because I'd basically be writing one from scratch and you can do that yourself, but what I will do is point out some issues with this to help you find your way:
The core of your design:
<div class="header-cont">
<div class="header">
<img src="">
<logotext>MyCompanyName</logotext>
<button>Home</button>
<div class="dropdown">
<button class="dropbtn">Products</button>
<div class="dropdown-content">
Product 1
Product 2
Product 3
</div>
</div>
<button>Locations</button>
<button>Contacts</button>
<button>History</button>
<div class="dropdown">
<button class="dropbtn">Language</button>
<div class="dropdown-content">
Language 1
Language 2
</div>
</div>
</div>
</div>
There are a number of things here I would never do:
<logotext> is not a valid HTML markup. You probably want a <span class="logotext"> or something along those lines.
Your navigation menu is comprised of <div>s with <button>s and other <div>s with <a> tags in them. This is a bizarre and confusing way to organize a menu. You should consider using <ul> tags and order your sub menu with <li> instead.
The problem you are directly running into is caused by the fact that you have your home <button> element with a left: 300px on it that your <div class="dropdown"> doesn't have.
A much easier and more logical way to organize a nav menu:
<ul id='menu'>
<li><a href='#'>Planets</a>
<ul>
<li><a href='#'>Mercury</a></li>
<li><a href='#'>Venus</a></li>
<li><a href='#'>Earth</a></li>
</ul>
</li>
<li><a href='#'>Stars</a>
<ul>
<li><a href='#'>Sun </a></li>
<li><a href='#'>Betelgeuse</a></li>
<li><a href='#'>Bellatrix</a></li>
</ul>
</li>
<li><a href='#'>Galaxies</a>
<ul>
<li><a href='#'>Milky Way </a></li>
<li><a href='#'>Andromeda</a></li>
<li><a href='#'>Antennae</a></li>
</ul>
</li>
</ul>
I just got this from google and here's the JSFiddle for it.
Here is a CodePen Example
Your HTML should have a mark similar to this as per your CSS
<div class="navbar">
<div class="navItem">Home</div>
<div class="navItem product-dropdown">
<span>Products</span>
<div class="dropdown-content">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
</div>
Then as for styling something similar to this:
.dropdown-content{
display:none;
}
.product-dropdown:hover .dropdown-content {
display: block;
}
.navItem {
float: left;
padding: 10px;
}
li {
list-style-type: none;
}
I've done a crap ton of research into how I can accomplish this, but I can't find anything solid or anything that I can properly understand.
I want to override the Bootstrap Dropdown hover color. Not the Dropdown menu, the actual Dropdown button itself. By default, the text color is white, and when you hover over it, it's some sort of blue-green color. I want to make the blue-green color to white as well.
Does anyone have any idea how I can go about doing this?
Here's my current code incase you need it:
CSS:
#media {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
.navbar-custom {
color: #262626;
background-color: #262626;
}
.navbar-default {
color: #262626;
background-color: #262626;
border-top: 4px solid red;
}
.navbar-default .navbar-brand:hover {
color: white;
}
.dropdown:hover {
color: white;
}
}
body {
background-color: black;
}
#navbar {
width: 100%;
}
HTML:
<div class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="dropdowns">
<a class="navbar-brand" id="brand">Traders: </a>
<li class="dropdown">
General <span class="caret"></span>
<ul class="dropdown-menu pull-left" role="menu">
<li>Medical</li>
<li>Utility</li>
</ul>
</li>
</ul>
</div>
</div>
Sorry if I left something out or don't make much sense, currently on some powerful pain meds. This helps me get my mind off the pain.
You can try including the !important to the style:
color: white !important;
this is done to override the default styles bootstrap establishes for the elements.
I am working on a redesign of a website, and I used the foundation framework to help make it responsive. Everything is working great, however the menu when made mobile sized, is overflowing off the side of the page. Attached is the html & css, any help would be appreciated!
HTML
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="example-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<!-- PUT LOGO HERE PLS -->
<li class="menu-text site-title">
<img src="img/logosean.png" alt="teddy bear head"> Teddy Bear Wheelchair Foundation
</li>
</ul>
<!-- NOT DOWN HERE SILLY, UP THERE -->
</div>
<div class="top-bar-right">
<ul class="menu">
<li class="navPush">Who We Help</li>
<li class="navPush">About</li>
<li class="navPush">Contribute</li>
<li class="navPush">Partners</li>
<li class="navPush">Contact</li>
</ul>
</div>
</div>
CSS
.top-bar,
.top-bar ul {
background-color: #4c1a1b;
font-family: "Lato", "Helvetica", sans-serif;
font-weight: 400;
color: #fcfae1;
}
.top-bar ul a {
color: #fcfae1;
list-style: none;
}
.navPush {
padding-top: 10px;
}
.top-bar ul a:hover {
color: #f6e497;
}
.site-title {
color: #fff;
font-weight: 900;
padding: inherit;
}
Text Cutting Off
Thanks
You are using class menu in ul which has predefined properties
.menu > li {
display: table-cell;
}
Therefore, in your CSS, write:
.menu > li{
display:inline-block;
}
or else change the menu class.
Hope it helps!
I am using the Bootstrap drupal theme. My menu items show up vertically, with styling (underline on hover and a dot next to the them. Am I missing something in my PHP or in my CSS? Also my hover dropdown isn't working. Not sure if that has to do with the way it is showing up now.
<div class="menu_wrapper">
<nav class="navbar" role="navigation">
<div class="container">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">
<?php $navigation = menu_navigation_links('main-menu');
print theme('links__system_main_menu', array('links' => $navigation));?>
</a>
</li>
</ul>
</div>
<div class="clear"></div>
</nav><!-- end main-menu -->
</div>
CSS
/* Menu */
.menu-wrapper {
background-color: #c32523;
opacity: 40%;
width: 100%;
height: 50px;
border-bottom: 1px solid #000000;
}
.navbar {
color: #ffffff;
}
nav {
color: #ffffff;
text-decoration: none;
}
ul.nav li.dropdown:hover ul.dropdown-menu {
display: block;
}
ul.nav li.dropdown ul.dropdown-menu {
margin-top: 0;
}
The menu wrapper class in your HTML is menu_wrapper with an underscore but in your css you used a hyphen .menu-wrapper. Change 1 of them accordingly and your styles will apply.