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!
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 am making a website for our voluntary association. Still learning web development.
Secondary vertical menue in Navigation menu (for example in activities tab) does not show over the content. I found that it was due to the content below which is possitioned as position:relative (col3 class) when I remove this position:relative the problems solves but I need to keep it as it is for later improvements, you can view the website in this link
http://slsaj.com/panduka/Contact.html
this screen shot shows the issue
actually I have the same problem in Home menue (it is also due to this postion issue coming from javascript and css I guess) hope I would be able to solve it too with the answer to this question
<
<div class="body1">
<div class="main">
<!-- header -->
<header>
<div class="headerbox">
<nav>
<div class="brand">
<h1>xxxxx Assoication in Japan </h1>
</div>
<div id="main-nav3">
<ul id="menu">
<li ></span>
<ul>
</ul>
</li>
<li ><a>Activities<span class="drop-down"></span></a>
<ul>
<li ><a href="" target="_blank" id="events" >Events</a></li>
<li><a href="tharanga.html" id="events2" >Tharanga Magazine</a></li>
<li><a href="Conference.html" >Research Conference</a></li>
</ul>
</li>
<li ></span>
<ul>
</ul>
</li>
<li id="menu_active">Contact<span class="drop-down"></span>
<ul>
</ul>
</li>
<li ></span>
<ul>
</ul>
</li>
</ul>
</div> <!-- menu -->
</nav>
</div>
</header>
<!-- / header -->
<!-- content -->
<article id="content">
<div class="wrapper">
<div class="box1">
<div class="line1 wrapper">
<section class="col1">
<h2><strong>O</strong>ur<span> Details</span></h2>
<strong class="address">
President:<br>
Telephone:<br>
E-Mail:<br>
Secretary:<br>
E-Mail:<br> <br>
Fb:
</strong>
Mr. xxxx<br>
080<br>
xxxx[at]gmail.com <br>
Ms. xxxxx<br>
xxxx[at]gmail.com <br> <br>
#xxxxxxxxx
</section>
<section class="col2 pad_left1"> <!-- This is the cause for this problem ***** -->
<h2 class="color2"><strong>S</strong>ubcribe to<span> email database</span></h2>
<p class="pad_bot1">
You can subcribe to out email database by filling the following form <br>
Subcribe !
</p>
</section>
</div>
</div>
</div>
<!-- This col2 position:relative is the cause for this problem ***** -->
.col2 {margin:0 6px;width:560px;position:relative}
#main-nav3 {
float: left;
width: 700px;
z-index: 30;
}
#main-nav3 ul {
font-size:12px;
list-style: none;
}
#main-nav3 ul li {
float: left;
}
#main-nav3 ul li:first-child {
border: none;
}
#main-nav3 ul li a {
display: block;
position: relative;
width: auto;
text-decoration: none;
font-size:17.8px;
}
#main-nav3 ul li a span.drop-down {
}
#main-nav3 ul li:hover {
background: pink;
}
#main-nav3 ul li ul {
display: none;
}
#main-nav3 ul li:hover ul {
background: brown;
display: block;
position: absolute;
}
#main-nav3 ul li ul li {
float: none;
display: block;
border-left: none;
position: relative; z-index:10;
}
#main-nav3 ul li ul li a {
width: auto;
border-top: dotted 1px #7dad16;
color: yellow;
In the .headerbox css class, opacity: 0.9; is causing the issue. comment that out.
also in #main-nav3 ul li ul {...} add z-index:10; which will fix the dropdown menu issue.
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.
I am trying to make a navigation bar with a four columns submenus. I coded most of things, but when I creating the submenu I found the problem.
This is my HTML:
<div id="navigation">
<ul>
<li class="current">
Home
</li>
<li class="sub-menu">
Our Products
<div class="subnav product">
<div class="content">
<div class="col">
<ul>
<li class="one">
Main Menu Item
</li>
<li class="one">
Main Menu Item
</li>
<li class="one">
Main Menu Item
</li>
</ul>
</div>
<div class="col">
<ul>
<li class="two">
<img src="" />
Promoting Peace in the Niger Delta
</li>
<li class="three">
<img src="" />
Promoting Peace in the Niger Delta
</li>
<li class="four">
<img src="" />
Promoting Peace in the Niger Delta
</li>
<li class="five">
<img src="" />
Promoting Peace in the Niger Delta
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="">
Service Maintenance
</li>
<li class="sub-menu">
Frequently Ask Questions
<li class="sub-menu">
Our Products
<div class="subnav product">
<div class="content">
<div class="col">
<ul>
<li class="one">
Main Sub Item
</li>
<li class="one">
Main Sub Item
</li>
<li class="one">
Main Sub Item
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
Hope somebody will help me out.
Thank you.
The problem is the container width is defined at 300px
#navigation ul li > div.product {
width: 300px;
}
And its child elements are taking up 100% of that space. So you need to make sure they have room to float left.
#navigation div.col {
float: left;
height:200px;
width: 25%;
}
Hopefully that helps with your question.
Fiddle
Check this http://jsfiddle.net/qtvVK/11/embedded/result/.
I made some changes to your markup and used display:inline-block; instead of floating elements
Relevant CSS syles
/* Dropdown styles */
#navigation ul > li > ul.sub-menu {
display: none;
position:absolute;
padding:10px 0;
background:#fff;
border: 1px solid #DDDCDC;
top: 24px;
z-index: 1;
}
/* Show dropdown when hover */
#navigation ul > li:hover > ul.sub-menu {
display:block;
}
.row {
width:auto;
white-space: nowrap;
}
.col {
display: inline-block;
vertical-align: top;
padding: 0 10px;
}
i suggest using jQuery.
it has simple function called slideDown().
Here is a link to a good tutorial.
You should do like so: First hide your menu when script starts:
$("#idOfDropDownMenu").hide();
And command to drop menu down when mouse enters button and slide up when it leaves it:
$("#idOfButton").hover(function(){ //function that fires when mouse enters
$("#idOfDropDownMenu").slideDown();
}, function() { //function that fires when mouse leaves
$("#idOfDropDownMenu").slideUp();
}
Instead of using IDs you can use any CSS selector.
I hope this helps with your question.
css
ul li ul
{
display: none;
position: fixed;
margin-left: 191px;
margin-top: -37px;
}
ul li:hover ul
{
display: block;
}
ul li a:hover
{
color: #fff;
background: #939393;
border-radius:20px;
}
ul li a
{
display: block;
padding: 10px 10px;
color: #333;
background: #f2f2f2;
text-decoration: none;
}
ul
{
background: #f2f2f2;
list-style:none;
padding-left: 1px;
width: 194px;
text-align: center;
}
html
<ul>
<li>Home</li>
<li>
About
<ul>
<li>About Me
<li>About Site
</ul>
</li>
<li>Contact</li>
</ul>
If you could kindly hover your mouse over the MORE button in the menu here: http://jsfiddle.net/H8FVE/7/
You will see that there is a list containing the words Random text here. I tried to style that list but somehow the styling of the drop down menu prevents me from doing it. The style I used for the list is:
#trendcontainer {
margin-top: 0px;
padding-bottom: 1px;
}
#trend { width: 188px; }
#trend ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#trend film
{
display: block;
padding: 3px;
width: 188px;
background-color: #B40404;
border-bottom: 1px solid #eee;
text-align: center;
letter-spacing: 0.4px;
color: #FAFAFA;
}
Here is part of the HTML:
<div id="second-menu" class="clearfix">
<ul id="secondary-menu" class="nav sf-js-enabled">
<li class="manimation">Animation</li>
</ul>
<ul id="mega">
<li class="dif mmore" style="background:none;">More...
<div>
<moretopbar>
<ul>
<li class="mgames">Games</li>
<li class="mliterature">Literature</li>
<li class="marts">Arts</li>
<li class="mcontact" style="background:none;">Contact</li>
</ul>
</moretopbar>
<morecontainer>
<moreleftbar>
<trendcontainer>
<trend>
<ul>
<li><film>Random text here</film></li>
<li><film>Random text here</film></li>
<li><film>Random text here</film></li>
<li><film>Random text here</film></li>
</ul>
</trend>
</trendcontainer>
</moreleftbar>
</morecontainer>
</div>
</li>
</ul>
</div> <!-- end #second-menu -->
Although, I would advice overlooking the fiddle for a visual presentation of the issue: http://jsfiddle.net/H8FVE/7/
Can you figure out how to fix the styling? If you choose to answer, please be detailed as my coding knowledge is limited - ideally with an updated fiddle.
I just updated it. http://jsfiddle.net/H8FVE/11/
I added a class called .random in the css code and class="random" into the ul element you aimed to modify.
in the css I added the following code, although you may change it to fill your purposes. (if you want to style only the ul, change it to .random { }
.random li {
font-weight:bold;
}