I'm using the Pure CSS framework and my code looks like
<div class="container pure-g">
<header class='pure-u-1'>
<h1 class='logo'>
TEST
</h1>
<nav class="pure-menu pure-menu-open pure-menu-horizontal">
<ul>
<li>Example Link 1</li>
<li>Example Link 2</li>
</ul>
</nav>
</header>
</div>
Here's a JSfiddle: http://jsfiddle.net/ME4jv/
What I'm trying to do is line up the logo (to be floated left) with the navigation links (floated right), but both floating and the grid system aren't working.
Unfortunately you need to override the framework width declaration that has been assigned to the nav. Currently it is set to 100%;. This is why it is not floating up.
DEMO http://jsfiddle.net/ME4jv/2/
.pure-menu.pure-menu-open {
float:right;
display: block;
width: auto;
}
Related
I'm a bootstrap 3 newbie, so please be gentle with me :) I know i'm going completely down the wrong route here. I've tried several approaches, this was just the latest. I've searched for bootstrap 3 websites doing the same thing, so i could learn from them, but can find any (some similar) but not with the big logo)
All I want is a big logo on the left taking up the full height of my header (about 100px) then small menu top right Contact us | Blog | Apply and main menu center bottom of the header space (but not under the logo) starting next to it (ideally centered) with 5 menu options. I tried to add a picture but it wont let me.
heres what I have : `
<style>
.smallmenu {
color: white;
background-color: #003300;
padding-right: 20px;
float: right;
font-size: 12px;
line-height: 50px;
}
.mainmenu {
background-color: #0000cc;
color: white;
padding-left: 200px;
float: right;
line-height: 30px;
font-size: 16px;
}
.logo {
background-color: #f11f18;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 logo">
<img src="img/logo_en2.png" alt="logo">
</div>
<div class="smallmenu">
<ul class="list-inline">
<li> Contact Us</li>
<li> Apply Now</li>
<li> Blog</li>
</ul>
</div>
<div class="col-lg-10 mainmenu">
<ul class="list-inline">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</div>
</div>
</div>
`
the coloured backgrounds are just to help me see where things go.
Of course as soon as I resize this, it falls apart. if someone could point me in the right direction.. with how the structure should be.. should I use navbars? should I be using col-xx-xx or not in a header? is it just one row, or should it be 2?
I guess on mobile it should have logo and small top menu and the main menu should be stacked.
Really appreciate any help with structure, site to look at or code samples I can learn from.
Thanks
First bit of advice I would give is start with the broad layout - where all the stuff on the screen is going to go - before you get down to trying to style menus etc. because you never know when inheritance is going to break something.
Is this (fiddle) basically what you're looking fro?
The key concept is:
<div class="row">
<div class="col"></div>
<div class="col">
<div class="row"></div>
<div class="row"></div>
</div>
</div>
I'm trying to write my new webpage. On the top I want to have one center div called top-bar-container, with three other div's something like that :
<div id="top-bar-container">
<div id="top-main-menu-container">
<ul id="main-menu">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</div>
<div id="logo-placeholder">
<img src="images/logo.png" width="300" height="75">
</div>
<div id="mail-login-container">
</div>
</div>
When trying to get the effect of a div to the left was always on the extreme left, right, to the right and the logo was always in the middle. I like to use position: absolute but this reluctance. I have to deal differently. Is anyone able to help me get this effect?
Here's one way of doing it.
#top-bar-container > div {
float: left;
}
You can float the links left, then float the mail container right. Apply a text-align center to the parent div and everything should be fine.
#top-bar-container {
text-align: center;
}
#top-main-menu-container {
float:left;
}
#mail-login-container {
float:right;
}
Fiddle here:
http://jsfiddle.net/3eut86s6/
I have a page I'm working on where currently I have 2 items. Item 1 is a flexnav jQuery navigation menu with a dropdown. Item 2 is a slick jQuery div scroller. I am trying to position the slick scroller just below the flexnav menu. The problem I'm running into though is when you hover over one of the menu items the dropdown for the sub menu is covered up by the slick scroller divs. This only seems to be happening with a screen larger than 800px as the flexnav plugin changes to a mobile friendly navigation menu on small screens.
I have tried changing the css position setting of both items but I just can't seem to figure out how to make the dropdown menus appear above the slick divs. Does anyone know what I'm doing wrong here or have any suggestions on how I could change things around to achieve what I am looking for?
Here is a example JSFiddle
The code I am using:
<header>
<nav style="background-color: #FAD10E; height:50px">
<div class="menu-button">Mobile Menu</div>
<ul class="flexnav" data-breakpoint="800">
<li>Home</li>
<li>Stuff
<!-- THIS DROPDOWN IS COVERED BY THE AUTOPLAY DIV -->
<ul>
<li>Stuff 1</li>
<li>Stuff 2</li>
<li>Stuff 3</li>
<li>Stuff 4</li>
<li>Stuff 5</li>
<li>Stuff 6</li>
</ul>
</li>
<li>Stuff 2</li>
<li>Stuff 3</li>
<li>Stuff 4</li>
<li>Stuff 5</li>
</ul>
</nav>
</header>
<div>
<!-- THIS AUTOPLAY DIV SHOWS ON TOP OF THE MENU DROPDOWN ITEMS -->
<div class="autoplay">
<div><img src="http://www.affordablehomecare.org/assets/images/fade/happy-home-care-client.jpg"></div>
<div><img src="http://www.affordablehomecare.org/assets/images/fade/helping-hands-home-care.jpg"></div>
<div><img src="http://www.affordablehomecare.org/assets/images/fade/loving-home-care-client.jpg"></div>
</div>
</div>
You only need to add two lines of CSS
Example fiddle
CSS
.flexnav{
-webkit-padding-start: 0px;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width:90%;
position: relative; /* <-- Added */
z-index: 1; /* <-- Added */
}
The position: relative allows for the element to have a z-index applied (an element must not be statically positioned, relative positioning will allow the element to display in normal document flow without having a static positioning).
The z-index: 1 provides a separate stacking context for the nav. Otherwise, because it precedes your carousel in document flow, will necessarily display beneath it when overlapped without a z-index given.
Stacking contexts apply generally only to elements which sit at the same hierarchical depth. So putting the flyout in your nav with a higher z-indexwon't work.
The question pretty much explains it but I have list items I want to put a simple diamond icon before them but when I try to use ::before it ends up putting the image above instead of the same line and I can't really seem to find out how to put it right before the list icon on the same line.
Like I said the image is just a small diamond, its 5px by 5px
.list-menu::before {
content: url('../images/menu-icons/image-before.png');
}
<div class="sb-slidebar sb-left sb-style-push">
<nav>
<ul>
<li class="list-menu">Home</li>
</ul>
</nav>
</div>
There's no need to use the ::before pseudo-element here at all. You can just use a background image:
.list-menu {
background-image: url('http://placehold.it/16x16');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px; /* Adjust according to image size to push text across. */
}
<div class="sb-slidebar sb-left sb-style-push">
<nav>
<ul>
<li class="list-menu">Home</li>
</ul>
</nav>
</div>
Well, list-style-image is made for that.
Supported since IE 4.0. That should be enough I guess.
ul {
list-style-image: url('http://placehold.it/12x12');
}
<ul>
<li> Text content </li>
<li> Text content </li>
<li> Text content </li>
</ul>
Answer 2022
Nowadays you can use ::marker pseudo element
li::marker {
content: ' 🤖 '
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
I'm starting with Bootstrap and have a small problem with the navbar-element. I need to declare a container with the width of 1024px and have to add two navbars. On at the top and the other one below it. Both navbars need a distance from the right div of 0px.
(Stackoverflow doesn't want to let me post pictures, but I think it's much more easier if you can see what I mean: http://www.abload.de/img/asdjraik.png)
As you can see the first navbar is working correctly, but now I need another one below it. Padding from the container under it should be exactly 5px.
My problem is, that the other navbar gains the same padding from the top as the first navbar. I can't get it below the other one. When I define the following classes for this problem another one comes up:
.small-margin {
margin-top: 20px;
}
.big-margin {
margin-top: 110px;
}
My HTML looks like this:
<div class="navbar small-margin">
<div class="navbar-inner">
<div class="pull-right">
<ul class="nav">
<li>link 1</li>
<li>link 2</li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
<div class="navbar big-margin">
<div class="navbar-inner">
<div class="pull-right">
<ul class="nav">
<li>another link 1</li>
<li>another link 2</li>
</ul>
</div>
</div>
</div>
The second navbar appears on the left side of the first navbar and not below it. I tried a lot of CSS-fixes.
Anyone have a idea how to get the 2nd navbar below the first?
Thanks in advance!
I've tried your code and it's works
I also tried adding it into 1024px container
.container{
max-width: 1024px;
}
this is the result
Your css code must be conflicted with the bootstrap. maybe you could try wrapping each navbar with .row. I believe that this solution is surely make all navbar separated.
<div class="row-fluid">
<div class="span12">
... navbar 1 ...
</div>
</div>
<div class="row-fluid">
<div class="span12">
... navbar 2 ...
</div>
</div>