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.
Related
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;
}
i created a navbar header with the new bootstrap 4 alpha frame work.
<nav class="navbar navbar-light navbar-fixed-top pulse-header">
<ul class="nav navbar-nav navbar-nav-left">
<li class="nav-item"><i class="ion-grid pulse-icons"></i></li>
</ul>
<ul class="nav navbar-nav float-xs-right">
<li class="nav-item"><i class="ion-ios-search-strong pulse-icons"></i></li>
<li class="nav-item">
<a href="#" class="open-notification-sidebar">
<i class="ion-earth pulse-icons"></i>
<span class="pulse-circle"></span>
</a>
</li>
<li class="nav-item"><i class="ion-chatboxes pulse-icons"></i></li>
</ul>
</nav>
css
.pulse-header {
height: 60px;
min-height: 60px;
max-height: 60px;
background-color: #1f2532;
padding: 13px 15px;
}
.pulse-header .navbar-nav-left {
margin-left: 20px;
}
.pulse-header .nav > .nav-item {
margin-right: 20px;
}
.pulse-header .nav > .nav-item > a {
position: relative;
}
i would like to have a logo centered in the navbar but do not know how to get it done, cause when i put on into, my icons on the right side are moving down.
bootply
You just need one block of css
Here is a working example of how I achieved what you're are looking for.
I added an img tag as a child of the nav bar and then set it to bellow code.
Try this:
.navbar img {
display:block;
margin: 0px auto;
}
In the event that when you begin to populate the navbar you find that the logo no longer centers then attempt this code for your logo
Or try this:
#logo {
position: absolute;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
This method will not be as automatic however will work if your content beigns to offset the logo.
Working Example: http://www.bootply.com/XVlsafgbzD
New to Bootstrap and creating a basic navigation bar. I am hoping that what I need makes sense. Put simply, I need the background color and text color of list items in the dropdown-menu to match both before and after they collapse. I cannot seem to find the right CSS attributes to edit, and the many combinations that I have tried do not solve my problem. A similar question did not solve my problem, but perhaps it is worth looking at for others.
Below is what the menu looks like before it collapses. Each <li> has a link, or <a>, within it (see basic HTML below). The text color is black, and the background color is white. When the item is hovered over, the background of <li> turns tan. I want the same colors after the menu collapses:
After collapse it appears like this:
The colors seem to change back to Bootstrap's defaults after collapsing. I would like the text for Sub 1 and Sub 3 to be black by default with a white background, while keeping the color behind the header, Stuff 2, the same. The colors seem to work fine when clicked or hovered over (tan background with black font).
Below is some of the relevant HTML and CSS. I know that some of it is messy (and that the use of !important; is often considered poor form), but I hope someone out there can help me identify the block of code so I can get it working and then focus on cleaning it up.
Basic HTML:
<nav class="navbar navbar-inverse">
<div id="navbarbg" class="container-fluid">
<div id="rbgnavbar" class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="logo" class="pull-left" href="http://www.redbuttegarden.org"><img src="images/logo.png" alt="Red Butte Garden"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="rbgwhitelink">STUFF 1 <span class="caret"></span></span></a>
<ul class="dropdown-menu">
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="rbgwhitelink">STUFF 2 <span class="caret"></span></span></a>
<ul class="dropdown-menu">
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="rbgwhitelink">STUFF 3 <span class="caret"></span></span></a>
<ul class="dropdown-menu">
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
Basic CSS:
#rbgnavbar a:hover, a, li, .dropdown-menu li:hover {
color: #000000;
}
.dropdown-menu li:hover {
background-color: #F2EDE4;
color: #000000;
}
/* Main dropdown menu items change cover when selected/clicked */
.dropdown-toggle:active, .open .dropdown-toggle, .dropdown:hover {
background-color: #196143 !important;
}
.dropdown-menu li, .dropdown-menu a {
text-align: center;
color: #000000;
}
.dropdown {
font-size: 10px;
padding: 0;
font-weight: bold;
}
#rbgnavbar {
max-width: 1400px;
margin-left:auto;
margin-right:auto;
background-color:#00502F;
}
.rbgwhitelink {
color: #FFFFFF;
}
.dropdown ul {
padding-top: 0px;
padding-bottom: 0px;
font-size: 10px;
font-weight: bold;
}
/* Border thickness and color between dropdown menu li, padding */
.dropdown-menu li {
border-top: 2px double #D3D3D3;
padding-top: 5px;
padding-bottom: 5px;
}
/* Background color of li in navbar when hovered over */
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li:hover {
background-color: #F2EDE4;
}
/* Makes dropdown-menu li links bold*/
.dropdown-menu li > a, .dropdown-menu li > a:visited {
font-weight: bold;
}
I suggest to use media queries and add the classes you want to tweak.
For example:
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
.dropdown-menu>li>a {
background-color: #fff;
}
}
For Bootstrap 3 default media queries you may found it here
After some experimenting, this did it:
.dropdown-menu li {
background-color: #FFFFFF;
}
.dropdown-menu li:hover {
background-color: #F2EDE4;
}
.dropdown-menu li > a:hover {
text-decoration: none;
}
/* Changes the color of link text <a> after navbar has collapsed for small screen or mobile mode */
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:visited {
color: #000000;
}
I think you have to change this color:
.dropdown-toggle:active, .open .dropdown-toggle, .dropdown:hover {
background-color: #196143 !important;
}
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!