I am trying to produce a Navbar similar to the one on this page :
http://wrapbootstrap.com/preview/WB0375140
I am using Bootstrap 3 and can create the top corner rounded boxes with slight gradient at bottom easy enough.
The thing I am struggling with is that the menu items in the navbar on that example are all the same width regardless of how wide the text in them is.
I am scratching my head trying to find out how that is done - And ideas much appreciated.
You have to add css width property to all elements in the navbar.
Assuming your navbar is something like this:
<div id="myCustomNavbar">
<ul>
<li class="active">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
You should add some style with CSS:
#myCustomNavbar > ul > li
{
width: 100px !important;
}
Remember you can always right-click the element you are interested in (in the sample webpage), and click Inspect element. There you can see all html markup and CSS styles applicated to that element
Related
I am trying to create this layout in CSS3
The image on top-left should collapse the vertical menu and show only the images. This should be animated, so it smoothly collapses. I want to do a CSS only solution, no JS/JQuery, no Bootstrap if at all possible. When collapses, the green and yellow boxes should move left as well. Both blue and green boxes should be fixed and the yellow one scrollable.
This has some potential features I want. This is not exactly what I want, and it does not work in my browser.
I am not sure how I can make, with CSS only, the top-left image link to resize the vertical menu, hide only the text of the links (which is not under a span, since I dislike to use it for presentation only), and change its own image. Of course, by clicking again on the new top-right image it should "de-collapse".
One problem I have is that I used padding for the green and yellow boxes as this Website does, and this seems incorrect to me. They should automatically be readapted to the new layout, without having to toggle the padding.
I have created a JSfiddle.
<body>
<header>
<nav>
<a href="#">
<img src="logo.png" alt="logo">
</a>
<ul>
<li><img src="option1.jpg">Option 1</li>
<li><img src="option2.jpg">Option 2</li>
<li><img src="option3.jpg">Option 3</li>
</ul>
</nav>
</header>
<main>
<nav>
<ul>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
</ul>
</nav>
<h1>Main title</h1>
TEXT TEXT TEXT
</main>
</body>
Any help is appreciated.
EDIT:
Browser support - I would like to address mainly modern browsers, so I will not care much about old IE tricks.
It seems that it is not possible to do it with only CSS (I kind of felt that from my old CSS experience, but was not sure if recent improvements had gone so far to allow it). If JS/JQuery is required, I guess the solution is to capture the click on the image and change the DOM. Not sure how the animation can be done though. And what about the basic layout? Is there a way to keep green&yellow on the left side, close to the blue box, without padding them differently depending on collapse?
The most common way to achieve a toggle without JS is using the checkbox hack. Here is a simple example to get you started (clicking menu will toggle the list style):
.main_nav__checkbox {
position: absolute;
top: -1000em;
}
.main_nav__checkbox:checked ~ ul {
background: red;
}
<nav>
<input type="checkbox" name="togglenav" id="togglenav" class="main_nav__checkbox" aria-label="Toggle Menu" />
<label class="main_nav__toggle" for="togglenav">Menu</label>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</nav>
Note that there are reasons that this isn't used often:
It is 'hacky'
It relies on the :checked attribute ( IE9+ )
It relies on the label checking the checkbox ( a firefox bug made this difficult in the past)
ya, as mentioned in above answer i've edited your fiddle made it work with that 'hacky' checkbox :checked css selector. but i'm unable to animate it though
try modifying the fiddle or i'll update the answer if i can get the animation to work!!!
FIDDLE
I want to put some space between some horizontally laid out list items, should I use or padding-left to separate them?
  example:
<ul class="menu">
<li class="menu_item">Option 1 </li>
<li class="menu_item">Option 2</li>
</ul>
padding-left example:
<ul class="menu">
<li class="menu_item">Option 1</li>
<li class="menu_item">Option 2</li>
</ul>
.menu li.menu_item { padding-left: 10px; }
Simple answer. Use padding-left it's easier to maintain, change and it's more customizable. As suggested above you might even want to use margin instead of padding this is usually necessary to separate items with a background-color.
I'll show an example just give me a second to make one.
Edit:
Here's a fiddle. I decided to just show you full screen since you already know the html and css.
Notice how the background-color is seperated with margins, but not with padding or  . Margin is often useful for that reason, but sometimes you want the background color in the spacing. You can use both margin and padding to get the spacing you want.
The reason why margin works that way and padding doesn't is because of the box-model. More about the box-model here.
Padding is definitly the best way to do that.
In fact it will be more easy for you later, to customize your list...
Imagine that there is not only 2-3 colums or row in your list but 100 etc...
Take a list like this:
<ul class="menu">
<li> Option 1 </li>
<li> Option 2 </li>
</ul>
The css part would looks like this:
.menu
{
//Your style..
}
.menu li
{
padding-left: 5px; //As you wants...
}
Refrain from using
padding-left is the right option.
Alternatively you can use margin-left
As you are creating a menu, I would suggest (based on my past experience) using margin-left for list being used for menu items. Gives more flexibility and cleanliness.
Looking for help in creating a navigation menu, where the navigation bar sits above a site logo. I want the sub-menu to expand out of the navigation bar horizontally and position itself between the parent navigation bar and the logo.
The sub-menu is horizontal
The logo is below the navigation bar when collapsed
The sub-menu will expand out of the navigation bar and push down the position of the logo.
Main navigation:
<nav>
<div class="container">
<ul class="menu">
<li> One
<ul class="sub-menu">
<li>Sub Menu One
</li>
<li>Sub Menu Two
</li>
<li>Sub Menu Three
</li>
<li>Sub Menu Four
</li>
<li>Sub Menu Five
</li>
</ul>
</li>
<li> Two
</li>
<li> Three
</li>
<li> Four
</li>
<li> Five
</li>
</ul>
</div>
</div>
</nav>
<div class="logo"></div>
I have made a mock example here: http://jsfiddle.net/GSfpj/11/ including the CSS I've been playing with.
Instead of the sub-menu expanding underneath the logo, I would like to be able to push the logo downwards and position the sub-menu in between both parent navigation and logo.
I would prefer to do this in pure CSS if possible, any help would be greatly appreciated :)
You could perhaps do something like this:
ul:hover {padding-bottom:25px;}
... although, to be honest, I don't think the behavior is vary nice anyway. Why not have the sub menu appear over the top of the logo?
Here's a working example: http://jsfiddle.net/GSfpj/27/
There are a few things I don't like about this, though:
Because the sub-menus need to be taken out of the DOM layout to make the main menu display properly, you need to set them to position: absolute. Because of this, you are forced to specify heights, which makes things a bit sloppy and hard to reuse.
If you make the <li>s position:relative, you end up with extra space before the sub-menu. If you instead position the sub-menu relative to the parent <ul>, the sub-menu might not even overlap its parent <li>, which also brings about issues with the :hover state.
Because the layout is not done dynamically (you need to explicitly specify heights and padding), you end up with blank space when you hover over a menu item without a submenu.
There really isn't much you can do to get around these issues without getting into javascript or different markup (add classes to represent whether something has a sub-menu or not, etc.)
It works, though, so take it as you will.
Here is your updated feddle link. You have to change the following css:
ul.menu li {
display:inline;
padding:10px;
position:relative;
z-index:9999;
}
ul.menu li ul.sub-menu {
position:absolute;
margin:0;
padding:0;
background:#2f2f2f;
width:300px;
}
I'm designing a navigation bar as shown in image below (a) with the following code:
<ul>
<li class="unselected">Step 1</li>
<li class="selected">Step 2</li>
<li class="unselected">Step 3</li>
<li class="unselected">Step 4</li>
<li class="unselected">Step 5</li>
</ul>
I want to have one background image for unselected steps (d) and one for the selected step (c). For simplicity let's assume Step 1 and Step 5 use the same background as well.
I want to adjust the button background in HTML only with a class name.
The question is how can I achieve the result with CSS? I just want to know how background of two neighbor elements can overlap each other?
Edit: the steps are links. the background is a transparent PNG file preferably only containing the blue or gray shape and its border.
Answer: http://jsfiddle.net/morrison/99LhB/
Notes:
Click-boxes will be messed up on diagonals. I just realized that this will always be the case. I'd decrease the width of the arrow if I were you to help avoid this issue. I would also add a hover state which would help clarify which one you are hovering on. If they aren't hyperlinks, this doesn't matter: feel free to remove those css rules.
HTML simplicity makes for CSS complexity in this case. There are less classes to worry about, but now we rely on CSS selectors. I would personally choose this way over the other, but that's a personal choice.
There's only one image. Uses a CSS sprite to accomplish this. It also speeds up the webpage a little.
Shows how it looks for all 5 steps.
You can do this. what you want to do is use a negative margin.
.someclass {
margin-left: -5px;
}
That should overlap the each of the elements (if applied to all li objects).
They can't overlap only the background, but html element might be stacked. However I'd recommend such a solution only if you have no other.
In your visual example, I guess that must be something like that :
Html :
<ul>
<li class="before_selected">Step 1</li>
<li class="selected">Step 2</li>
<li class="after_selected">Step 3</li>
<li class="unselected">Step 4</li>
<li class="unselected">Step 5</li>
</ul>
CSS :
.unselected {
background-image: url('all_grey.jpg');
}
.before_selected {
background-image: url('left_grey_right_blue.jpg');
}
.after_selected {
background-image: url('left_blue_right_grey.jpg');
}
.selected {
background-image: url('all_blue.jpg');
}
I have a really simple set up:
<div class="container">
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
</div>
I had assumed that all contents and the bullets of the UL would be within the div, but currently this is not the case.
The bullet points for the UL appear outside of the div and effectively disappear when overflow is hidden.
To me this is somewhat broken and cross browser compatible, and I've scanned the HTML spec but couldn't find anything saying this should happen.
Is there a CSS fix for it or other layout fix?
You'll want to use list-style-position:
ul {
list-style-position: inside;
}
list-style-position: inside works great unless your bullet points will need multiple lines on small screens as your text will align with the bullet point rather than where the text begins.
Keeping the default text-align: outside, allowing for a small margin and aligning the text to the left to override any centered containers gets around the bullet point alignment problem.
ul, ol {
margin-left: 0.75em;
text-align: left;
}
You usually lose the list decorations to the overflow of a div when your UL/OL and LI don't have enough padding, or you are floating elements or display: inline.
Try adding some padding/margins to your list items (LI element).
Are you floating your List items to the left or right? If so then the following will solve your problem.
<div class="container">
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
<div style="clear:both;"></div>
</div>
For some cases, using two divs can help.
<div class="container">
<div style="margin: 3%">
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
</div>
</div>
This kind of problems can usually be fixed using a good reset.css and re-writing all the information such as list-style and so on.
if using float property on list make sure you only add the style the the selected list and not all list elements on the page.