Trying to create a navigation menu at the top of the page, but the images are spaced too far away from each other and then they wrap. How do I bring them closer together?
CSS:
.weddingMenuIcon{
width:30%;
}
HTML:
<ul class="list-inline">
<li>
<img src="~/images/home.svg" class="img-responsive weddingMenuIcon" />
</li>
<li>
<img src="~/images/home.svg" class="img-responsive weddingMenuIcon" />
</li>
<li>
<img src="~/images/home.svg" class="img-responsive weddingMenuIcon" />
</li>
</ul>
If I were building this as a centered navigation I would apply inline: block to the list items and then use a margin to define the spacing between them.
See this jsFiddle
.list-inline li {
display: inline-block;
margin: 0 40px; /* Items have 40px spacing between */
}
The fix was simply changing the width from using percentage to using fixed pixel width.
Related
I am trying to add a underline like symbol below the active link for that purpose i am used ::after element and set it's width to 100% to get its parent element's width but the psudo element is way much bigger when width is 100%;
my html code is 👇
<header class="main-header">
<a class="category-name">
<span> Sneakers </span>
</a>
<nav class="main-nav">
<ul class="main-nav-list">
<li class="m">
<a class="main-nav-link" href="#how">Collections</a>
</li>
<li><a class="main-nav-link" href="#meals">Men</a></li>
<li>
<a class="main-nav-link" href="#testimonials">Women</a>
</li>
<li><a class="main-nav-link" href="#pricing">About</a></li>
<li><a class="main-nav-link nav-cta" href="#cta">Contact</a></li>
</ul>
</nav>
<ul class="my__ac-list">
<li class="nav--cart_icon" id="cartBtn">
<a href="#" class="cart-icon"
><img src="./images/icon-cart.svg" alt="cart icon" srcset=""
/></a>
<p class="cart--strip">3</p>
</li>
<li>
<a href="#">
<img
class="profile-thumbnail"
src="./images/image-avatar.png"
alt="image-avatar"
srcset=""
/>
</a>
</li>
</ul>
</header>
my css code is bit lengthier i couldnot format correctly so i have created code containg my html and css
codepen link = https://codepen.io/sinan-m/pen/abKQaxp
i want to add a underline below the active navigation link like in design
my design image https://github.com/front-end-mentor-works/e-com-product-page/blob/main/design/active-states-basket-filled.jpg
.main-nav-list li.m for this selector you need to add position: relative. Beacause right now the after pseudoelement is not positioned relative to the li element.
position: absolute;
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Because you didn't set position:relative on the li, he after element takes the width of the window browser. That's why when set to 100%, it's so wide.
Result
Solution
.main-nav-list li.m {
border-bottom: 5px solid tomato;
}
I edited the rule for the .main-nav-list li.m selector in the code pen.
To get it more spaced out, then add some padding. e.g.
.main-nav-list li.m {
border-bottom: 5px solid tomato;
padding-bottom: 1ex;
}
You also need to change
.main-nav-list {
…
align-items: top;
…
}
To keep the alignment good. And remove the yellow.
I'm working at a justified navigation bar. Some of the menu items are in two lines some have only one line. How can I manage it, that all menu items are vertically centered?
My HTML
<nav>
<div role="navigation" class="col-lg-12 hidden-xs hidden-sm hidden-md navi">
<ul class="nav nav-justified">
<li class="active">
<a href="#" >
<span class="glyphicon glyphicon-home active"></span>
</a>
</li>
<li>
<a href="rooms_prices.html" >
Rooms & Prices
</a>
</li>
<li>
<a href="location.html" >
Location
</a>
</li>
...
<li>
<a href="specials.html">
Specials & Events
</a>
</li>
<li>
<a href="contact.html">
Contact
</a>
</li>
</ul>
</div>
</nav>
My LESS:
nav {
margin: 0;
padding: 0;
}
.nav-justified {
width: 100%;
hight: 60px;
> li {
float: none;
alignment-adjust: middle;
> a {
display: block;
text-align: center;
}
}
THX for your hints!
EDIT:
Sorry I've messed up the code. I've left the -Tag out because there ave mor div sections with different navigation bars for several display sizes.
You have a ton of problems here, your markup is incorrect and you're trying to apply styles to elements that don't exist.
You're targeting nav, you have no nav element so you should be using .nav to target the class you've applied the div parent.
<div role="navigation"col-lg-12 hidden-xs hidden-sm hidden-md navi">
This is not valid HTML, it should be:
<div role="navigation" class="col-lg-12 hidden-xs hidden-sm hidden-md navi">
If you have nav items where the text drops down onto two lines considering your menu is justified I'd suggest that your text is too long and you should instead use some CSS3 truncation in conjunction with storing the full name of the menu item in its title attribute so it shows on hover - stretching out your other menu items is going to look strange and will require some hacking to achieve.
.nav-justified a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
The issue you will have trying to vertically center a justified nav is that usually you would make the list items display: inline-block and vertically center them that way, but as justified items they are display: block by default. Additionally Bootstrap applies the border styles directly to the anchors, not the list items, so even if you vertically centered them you'd have borders out of alignment.
I have a <ul> with a couple of <li>. In my css with li { display: inline; } I put the li elements in a horizontal order. The li elements contain a picutre and text. But now the picture and the text are also in horizontal order, but I want them to be under neeth each other. How can I do that?
<ul>
<li>
<img src="img/a.png" />
A
</li>
<li>
<img src="img/b.png" />
B
</li>
<li>
<img src="img/c.png"/>
C
</li>
</ul>
You will need to change your CSS as follows:
li {
display: inline-block;
}
li img {
display: block;
}
Here is a quick demo: http://codepen.io/anon/pen/VLLoEZ
This is not a bug but a normal behaviour. <img> tag is by default inline. You could solve this non-issue by either wrapping either your image or, better, your text into a block element. For example, a <p>tag for your text :
<ul>
<li>
<img src="http://placehold.it/140x100" />
<p>Your text here</p>
</li>
<li>
<img src="http://placehold.it/140x100" />
<p>Your text here</p>
</li>
<li>
<img src="http://placehold.it/140x100" />
<p>Your text here</p>
</li>
</ul>
jsFiddle
Note I use display:inline-block on li elements, taking advantage of both inline (putting things side-by-side, alignment,...) and block (fixed size, top/bottom margins) properties. Although it has a strange but easilly fixed "feature/issue", this is most of the time the best way to put elements side-by-side. display: inline or floating elements are also used but come with some other issues sometimes a bit trickier to be fixed.
I am trying to create a I am trying to create aI am trying to create aI am trying to create aI am trying to create aI am trying to create aI am trying to create aI am trying to create aI am trying to create a
HTML
<div id="pageTop">
<nav>
<ul>
<li> <img src="images/search.png" alt="" class="headerCon" /> <navText> Home </navText> </li>
</ul>
</nav>
</div>
CSS
nav > ul > li > a {
color: #aaa;
}
nav > ul > li > div ul > li {
display: block;
}
You can make the <img> elements block elements and center them using an auto margin.
ul img {
display : block;
margin : 0 auto;
}
Another would be to use background images along with a background position:
ul li.home {
background-image : url(...);
background-position : center;
}
You will probably also want to remove the spaces between the <li> elements. I like doing this by omitting the optional closing tags so you would have:
<ul>
<li><a href=...><img src=... />Item 1
<li><a href=...><img src=... />Item 2
...
</ul>
Other options for removing spaces can be found here: How to remove the space between list items
Edit: JSFiddle added with a stripped down version to show how this could work.
just put a line break in the <li>
<li><a href="..."> <img src="..." class="headerCon" /> <br/>
<navText> Home </navText> </a>
</li>
I would take out the <navText> too, that's not valid HTML
<li><a href="..."> <img src="..." class="headerCon" /> <br/>
Home </a>
</li>
I want to make my menu and image appear on the same line but sadly that doesn't seem to be happening. Could anyone tell me why and how I would solve my problem? I've got the following image and menu...
HTML
<div id="header">
<img alt="" height="67" src="Aidanlogo.png" width="400" />
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
<br style="clear: left" />
</div>
</div>
Menu CSS: http://pastebin.com/drMD7gwg
Header CSS
#header {
width: 700px;
margin-left: auto ;
margin-right: auto ;
}
try this
#menu ul li { display: inline; }
Divs are block elements, so by default it will always appear on a separate line.
You could make the image a block and float it left (display:block; float:left;)
You could make your div display:inline-block, or float:right; it, assuming there's room in the parent (700px).
DIV is a block element, so it won't display on the same line as anything else unless you change it's inline property:
#myslidemenu { display:inline; }
Also note that you'll have to modify the <ul> styles to display the <li> tags on a single line. See this link for more on that part.
edit I'm not sure what the jQuery slide menu does to the <div> or <ul> styles - you might have a look in Firebug after it's rendered.