I am working on http://www.inboundio.com and is using bootstrap for styling, while checking it on mobiles, I noticed the top menu link is overlapping another image (see http://i.imgur.com/X8FFuaz.png), how can I fix this (the dashboard link doesn't look responsive) ?
Here is the HTML code
Dashboard
<div class="top-menu pull-right home-menu" id="main-menu">
<ul class="nav">
<li>Features</li>
<li>Pricing</li>
<li>Demo</li>
</ul>
</div>
Here is the CSS
body.frontend .header .top-menu {
margin-top: 5px;
padding: 5px 10px;
position: absolute;
left: 50%;
margin-left: 140px;
}
.nav {
margin-left: 0;
margin-bottom: 20px;
list-style: none;
}
.pull-right {
float: right;
}
remove position:absloute from body.frontend .header .top-menu in your css
body.frontend .header .top-menu {
margin-top: 5px;
padding: 5px 10px;
}
Related
My predicament is this. I have a list, a simple cart, login, user registration list. I want to move the list up by adding padding. But I cannot with out the list adding line height. What is the way around this? See examples below. This list is in the header.
Before:
.content{
border: 2px solid #000;
}
li {
list-style-type: none;
font-size: 10px;
direction: right;
text-align: right;
padding-bottom: 20px;
line-height: 1;
display: block;
}
<div class="content">
<ul>
<li>Cart</li>
<li>Login</li>
<li>Customer Registration</li>
</ul>
</div>
After:
You need to add the padding to the ul and not the li .
give margin-top in minus so it will move upside
Try This:
ul {
margin-top: 0;
}
ul {
margin-top: 0;
}
li {
list-style-type: none;
font-size: 10px;
direction: right;
text-align: right;
padding-bottom: 20px;
line-height: 1;
display: block;
}
<ul>
<li>Cart</li>
<li>Login</li>
<li>Customer Registration</li>
</ul
As the first step in making my menu responsive, I want to add a media query in css to change the way the menu displays so that each list item is displayed vertically below the previous item, with it's own submenu items displayed below it before the next list item is displayed. Hope that makes sense. Here are the HTML and CSS that make the menu work in the desktop version of the site:
HTML
<nav>
<img id="logo" src="#logoUrl">
<ul>
<li class="#(CurrentPage.Url == "/" ? "current" : null)">Home</li>
#foreach (var item in menuItems)
{
<li class="#(CurrentPage.Id == item.Id ? "current" : null)">
#item.Name
#if (item.Children.Where("Visible").Any())
{
var subMenuItems = item.Children.Where("Visible");
<ul>
#foreach (var sub in subMenuItems)
{
<li>#sub.Name</li>
}
</ul>
}
</li>
}
</ul>
<br class="clear">
</nav>
(This is on Umbraco, so forgive all the Razor bits)
CSS
#logo {
float: left;
margin-right: 25px;
}
nav {
width: 100%;
height: auto;
background-color: #354a49;
}
nav > ul > li {
display: block;
position: relative;
width: auto;
height: 50px;
float: left;
font-size: 1.1em;
margin: 0px 20px 0px 20px;
padding: 15px 8px 13px 8px;
text-align: center;
}
nav ul li a {
color: #fefce9;
margin-left: auto;
margin-right: auto;
}
nav ul li a:hover {
font-style: italic;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 99;
width: 200px;
}
nav ul li:hover {
border-bottom: 2px solid #fefce9;
background-color: #a1b0af;
}
nav ul li:hover > ul {
display: block;
margin-top: 2px;
}
nav ul li ul li {
display: block;
float: none;
padding: 20px 3px;
background-color: #a1b0af;
border-bottom: 2px solid #fefce9;
}
nav ul li ul li a {
color: #fefce9;
}
nav li.current {
background-color: #a1b0af;
border-bottom: 2px solid #fefce9;
}
nav li.current > a {
color: #fefce9;
font-style: italic;
}
And here is the CSS I have in my media query at the moment:
#logo {
margin-right: -50px;
}
nav > ul > li {
float: none;
margin: 0px;
}
nav ul ul {
width: 100%;
}
nav li.current {
background-color: inherit;
}
That displays the main menu items one below the other OK, but when I try to change things so that the submenu items appear between the menu items I just end up with the submenu items appearing over the top of the menu items and each other.
EDIT
Here's the rendered HTML as requested:
</nav>
<img id="logo" src="/media/1042/wshalogo.png">
<ul>
<li class="current">Home</li>
<li>
About us
<ul>
<li>Our People</li>
<li>Who we were and are</li>
<li>Our Houses</li>
<li>Annual Reports</li>
</ul>
</li>
<li>
Being a Tenant
<ul>
<li>Asbestos</li>
<li>Being Safe & Secure</li>
</ul>
</li>
<li>
News
<ul>
<li>Community Garden</li>
<li>Football Team</li>
<li>Health Centre</li>
</ul>
</li>
</ul>
<br class="clear">
</nav>
Your second level ul is position: absolute; which means it's taken out of the normal document flow and won't take up space in relation to any other elements. Try changing absolute to relative. That should keep the items correctly positioned in the menu.
nav ul ul {
display: none;
position: absolute; /* <--- Try changing this to relative. */
top: 100%;
left: 0;
z-index: 99;
width: 200px;
}
Also, the fixed height on your top-level li doesn't let the element grow past 50px. Try setting that instead to a min-height:
nav > ul > li {
display: block;
position: relative;
width: auto;
height: 50px; /* <-- min-height: 50px */
float: left;
font-size: 1.1em;
margin: 0px 20px 0px 20px;
padding: 15px 8px 13px 8px;
text-align: center;
}
That worked in this fiddle but led to awkward jumping when the sub-menu was hovered and then un-hovered.
Also, consider your use-case - if you're doing this to support tablet/mobile devices the :hover state won't work the same way it doesn't when you're using a mouse. Users would have to know to press to the side of the "About Us" link text to see the dropdown, otherwise they'll get taken directly to the "About Us" page without seeing the :hover state. It might be necessary to either show all the items in a tree structure or use JavaScript to add additional functionality for the submenus.
Here's a decent solution to a responsive sub-menu without JavaScript, but it also doesn't use links for top-level menu items that have sub-items.
What should I do to align the first 3 buttons in the center of the bar?
#navbar{
list-style-type: none;
position: relative;
top: -4px;
padding: 0;
margin: 0;
overflow: hidden;
background-color: #212121;
}
In your navigation bar you can put these three in one separate div and then align it to center
Hello friends to center a that your
menu options (nav) you only need
to use the text-aling rule: center;
,why ? Because the menu list are
formed by '' li '' or '' ul '' and we
only apply this rule to list and
ready :), greetings from mexico;)
<html>
<head>
<style>
body{
margin: 0px;
}
.navbar{
height: 60px;
background-color: #bbb;
line-height: 60px; //this will center inline elements in your navbar
}
.container{
margin-left: 5%;
margin-right: 5%;
}
.btn{
background-color: white;
padding: 10px 20px;
width: 100px;
border: none;
border-radius: 2px;
display: inline;
}
.nav{
display: inline;
list-style-type: none;
}
.nav li{
display: inline;
}
</style>
</head>
<body>
<!--Navbar-->
<nav class="navbar">
<div class="container">
<ul class="nav">
<li><button class="btn">Button1</button></li>
<li><button class="btn">Button2</button></li>
<li><a class="btn"><a> Button</a></li>
</ul>
</div>
</nav>
</body>
The above code should work for you. I have shown buttons using anchor tag and also button tag
All,
I have been scratching my head for well over two hours now and I just cannot see whats wrong with the code.
I am building a liquid layout with two navigation bars at the top. The first one is sitting well but the second one (id="filem_right") refuses to sit alongside it.
Here is the HTML:
<body id="container">
<div id="main_bar">
<ul>
<li class="maintabs">Overview</li><li class="maintabs">Collar/ Neckline</li><li class="maintabs">Sleeves
<ul>
<li class="s_leftright">Left Sleeves</li>
<li class="s_leftright">Right Sleeves</li>
</ul></li><li class="maintabs">Body</li>
</ul>
</div>
<div id="filem_right">
<ul>
<li class="filetabs">File</li><li class="filetabs">Edit</li><li class="filetabs">Settings</li>
</ul>
</div>
And here is the CSS:
#container {
min-width: 960px;
max-width: 1034px;
min-height: 500px;
background: rgba(245,212,13,1);
}
/* START OF MAIN MENU */
#main_bar ul {
width: 60%;
position: relative;
left: 3.2%;
border: 1px solid black;
background: rgba(153, 244,200,0.3);
}
.maintabs {
display: inline-block;
width: 25%;
line-height: 3.5em;
list-style-type: none;
}
.maintabs a {
display: block;
text-decoration: none;
color: rgb(165,165,165);
color: rgba(165,165,165,1);
text-align: center;
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
}
.s_leftright {
list-style-type: none;
}
.maintabs ul {
display: none;
}
.maintabs:hover > ul {
display: inline-block;
position: absolute;
}
*/ END OF MAIN MENU */
/* START OF FILE MENU */
#filem_right {
display: inline-block;
position: relative;
width: 30%;
left: 69%;
top: 14%;
right: 3.2%;
}
.filetabs {
display: inline-block;
width: 33.3%;
overflow: hidden;
list-style-type: none;
line-height: 3.5em;
}
I had a look at Firebug and it appears that none of my code for 'filem_right' is rendered by the browser (FF 3.6).
Thank you,
Your comment here is incorrect,
*/ END OF MAIN MENU */
Should be /* at the start. This could be a reason the filem_right CSS isn't being picked up by the browser.
Saw this www.workatplay.com/ website, and got fascinated on how simple and nice stuff can look. I wish to make exactly like the header above.
With the header I am reffering to this:
http://img227.imageshack.us/img227/619/header1o.png
And how the links + the "[workatplay.com]" logo is set up at the right.
I tried looking at the source & css/source for learning, but It doesnt seem to be there. The part where the nav-sub(the pink bar) gets colordefined(css) and splitted.
Is the whole header a background itself? Why cant i find it in the css or anywhere else to know how they have done.
How can i make a header like this?
Here you go.. http://jeaffreygilbert.com/workatplayheader.html
Preview:
CSS:
/* Resetter */
ol, ul, li, a {
background: transparent;
border: 0px;
font-size: 100%;
margin: 0px;
outline: 0px;
padding: 0px;
vertical-align: baseline;
}
ul, li {
list-style-type: none;
}
/* Body */
body {
background-image: url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/bg-home.png);
}
/* Header */
.header {
margin: 0px auto;
position: relative;
width: 1000px;
}
.header ul li {
float: left;
}
.header ul li a {
background-position: 0% 0%;
background-repeat: no-repeat;
cursor: pointer;
display: block;
height: 80px;
text-indent: -9999px;
}
.header ul li a, ul#nav-sub {
background: transparent url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/sprite-nav.png) no-repeat scroll 0px -160px;
}
/* Nav */
ul#nav {
height: 80px;
margin-top: 80px;
-webkit-padding-start: 40px;
display: block;
}
ul#nav li.services a {
background-position: 0px 0px;
width:115px;
}
ul#nav li.toolbox a {
background-position: -115px 0px;
width:115px;
}
ul#nav li.work a {
background-position: -224px 0px;
width: 86px;
}
ul#nav li.about a {
background-position: -310px 0px;
width: 93px;
}
ul#nav li.insights a {
background-position: -403px 0px;
width: 113px;
}
ul#nav li.home {
float: right;
}
ul#nav li.home a {
background-position: -533px 0px;
width: 200px;
}
/* Sub Nav */
ul#nav-sub {
background-position: 0px -160px;
background-repeat: no-repeat;
height: 40px;
overflow: hidden;
}
ul#nav-sub li.contact {
float: right;
}
ul#nav-sub li.contact a {
background-position: 0px -200px;
width: 200px;
}
HTML:
<div class="header">
<ul id="nav">
<li class="home">work [at] play vancouver</li>
<li class="services">services</li>
<li class="toolbox">toolbox</li>
<li class="work">work</li>
<li class="about">about</li>
<li class="insights">insights</li>
</ul>
<ul id="nav-sub">
<li class="contact">contact work [at] play</li>
</ul>
</div>
Using Google Chrome, right click and select "Inspect Element". There is a task pane called "computed css" that will tell you exactly what the browser is displaying no matter how the css got there (default, inline, external). I use that to debug css I'm developing all the time. Other browsers may have similar features.
As to how to replicate it? The css would be rather simple. Two floated divs for each row. Inside each div would be two additional divs, one floated left and one floated right. Play with the margins until you get the spacing you like.
width: 100%;
background-color: {color you want};
margin-left: ____;
margin-right: ____;
etc
As for the logo, research css's vertical-align attribute. This, couple with font-size should give you the effect you want.
Well at workplay.com there is css file http://workplay.com/files/css/css_09edd7837a8690967d3b6d7e136222f6.css which you can locate by viewing source.
if you are using firefox then download and install Firebug Plug-in. similarly if you are using IE there is similar plug-in available from Microsoft "IE Developer Toolbar". or chrome or safari comes with Web Page Inspector tool . all are simple to use
just point with pointer from this plug-in and click on one the element for which you want to know css or HTML or JavaScript details.
here you can experiment with this by changing and see result instantly.
copy and paste the following code in your editor, the color and fonts are not the same but it look nearly likes your header
<html>
<head>
<style>
body {
font : 20px Arial;
margin: 0px;
}
div#header {
background : black;
color: white;
padding-top : 25px;
}
/*The title*/
div#header h1 {
float: right;
margin-right: 100px;
border; 1px white;
font : 20px Arial;
}
div#header ul {
list-style: none;
height: 50px;
}
div#header li {
float: left;
width: 100px;
}
div#pink_area{
background: pink;
margin-top; 0px;
}
div#pink_area ul {
list-style: none;
height: 50px;
}
div#pink_area li {
float: left;
width: 45%;
line-heigth: 20px;
text-align : center;
padding : 10px
}
</style>
</head>
<div id="header">
<h1>Work <small>[at]</small> play <small><sup>TM</sup></small></h1>
<ul id="menu">
<li>services</li>
<li>toolbox</li>
<li>work</li>
<li>about</li>
<li>insigths</li>
</ul>
<div id="pink_area">
<ul>
<li>Engaging digital experiences</li>
<li>contact us</li>
</ul>
</div>
</div>
</html>