I'm trying to figure out how to align the images (top right buttons) in a top row of 3, then a bottom row of 3. (*****)
I've tried to alter the .main-nav width to try and squeeze them on the next line but i think it's inheriting something from above. Using Chromes developer tool i was looking at the header element and noticed ul.main-nav has a height of 0px, could this be stopping them from coming down?
anything to point me in the right direction would be a great help, thanks!
Change the li css:
display: block; and the ul css: width: 300px; float:right;
Is this what you want?
I just added a width and float:right to the ul the li are in!
<ul class="main-nav" style="width: 287px;float: right;">
<li class="item-rss"><a target="_blank" href="http://www.wp-arena.com/?feed=rss2"></a></li>
<li class="item-fav"><a target="_blank" href="#"></a></li>
<li class="item-contact"><a target="_self" href="#"></a></li>
<li class="item-xing"><a target="_blank" href="#"></a></li>
<li class="item-facebook"><a target="_blank" href="#"></a></li>
<li class="item-twitter"><a target="_blank" href="#"></a></li>
</ul>
You may wrap images into a div with fixed width just to fit 3 images and other three will be in the next line.
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.
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.
I am developing a website and I want a menu like the above image. This is what I have tried: jsFiddle
HTML
<div class="">
<ul class="header-menu-ul">
<li class="header-menu menu-link1-color">ABC's Office</li>
<li class="header-menu menu-link2-color">Benefits</li>
<li class="header-menu menu-link3-color">NEW Brand</li>
<li class="header-menu menu-link4-color">Editorial</li>
<li class="header-menu menu-link5-color">Manger</li>
<li class="header-menu menu-link6-color">Extra</li>
</ul>
</div>
The problem I'm facing is it's taking a space between <li> tags.
I just floated the list items to the left, like this:
.header-menu-ul li {
float: left;
}
WORKING FIDDLE: link.
DEMO
This will create an always single line menu unliek the floating solution where often items fall from position on small sizes + no spaces between the items.
Code:
.header-menu-ul{
display: table;
width: 100%;
}
.header-menu{
display: table-cell;
}
my approach would be using inline-block and min-width. can also use percent in width (1oo% / total_li ).
everybody!
Got into a bit of a trouble here.
So, basically, I badly want to make my Parent Menu Items in Joomla! main menu slightly different then other Menu Items. What I want to achieve is that the Parent Item would have ... let's say, a little triangle made with bg image on the right to show visitors there are some submenus included.
I've been trying to get my CSS working, but somehow nothing happenes and with inspecting the generated code and elements CSS hasn't applied anything to the Parent Items.
Here's the code:
<li class="item-101 current active"><a href="/" >Domov</a></li>
<li class="item-107"><a href="/index.php/o-meni" >O meni</a></li>
<li class="item-108 deeper parent"><a href="/index.php/psihoterapija" >Psihoterapija</a>
<ul class="nav-child unstyled small">
<li class="item-113"><a href="/index.php/psihoterapija/podmeni-1" >Podmeni 1</a></li>
</ul>
</li>
<li class="item-109"><a href="/index.php/zdravstvena-psihoterapija" >Zdravstvena psihologija</a></li>
<li class="item-114 deeper parent"><a href="/index.php/ponudba" >Ponudba</a>
<ul class="nav-child unstyled small">
<li class="item-117"><a href="/index.php/ponudba/podmeni-2" >Podmeni 2</a></li>
<li class="item-118"><a href="/index.php/ponudba/podmeni-3" >Podmeni 3</a></li>
<li class="item-119"><a href="/index.php/ponudba/podmeni-4" >Podmeni 4</a></li>
</ul>
</li>
<li class="item-139 deeper parent"><span class="nav-header">Ostalo</span>
<ul class="nav-child unstyled small">
<li class="item-138"><a href="/index.php/ostalo/aktualno" >Arhiv novic</a></li>
<li class="item-116"><a href="/index.php/ostalo/povezave" >Povezave</a></li>
<li class="item-115"><a href="/index.php/ostalo/kontakt" >Kontakt</a></li>
</ul>
</li>
So, the items I want to change are those with .deeper.parent class.
The CSS code I wanted to apply but doesn't work:
#navigation .parent {
padding:37px 22px 37px 8px !important;
background-image: url(../images/more.png) !important;
background-position: right !important;
background-repeat: no-repeat !important;
}
I also tried changing #navigation .parent to #navigation .deeper.parent and to #navigation li.item-108.deeper.parent as well. Nothing really works. Any ideas? Thanks!
I'm assuming some coding here for display purposes, but what you want here is this part:
#navigation li.parent { padding:37px 22px 37px 8px !important; background:url(http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png) no-repeat right center}
You can see fiddle and the adjust at will (REMEMBER: I'm assuming your code so you'll have to adjust it to your real code!)
Firstly, ensure you actually have the #navigation ID assigned to your <ul> like so:
<ul id="navigation">
Secondly, make sure you do not target menu items based on their item number, such as .item-108. These are assigned by Joomla and may change in the future.
Ok, so as you mentioned, you want to target menu items with the deeper and parent classes, for this, you can use the following:
.deeper.parent a {
background: url(../images/more.png) no-repeat;
background-position: right center;
height: 12px;
}
Note that I have used right center to define the X and Y axis, and also defined the height of the image, which may be different for you.
Hope this helps
I'm stumped on this. Ive attempted to put in position:relative and various z-index in to no avail.
Below is my code for a simple drop-down menu.
It works fine in every browser except IE.
html page:
<div id="nav">
<ul id="navul">
<li id="rootHome">
<ul id="Home"></ul><a href="index.php"><img src="images/LA-icon.png" style=
"height: 40px;" id="home" /></a>
</li>
<li id="rootProducts" onclick="showMenu(this)">Products
<ul id="Products">
<li>
<p class="navLink" onclick="changePage('products-1.php')">Product 1</p>
</li>
<li>
<p class="navLink" onclick="changePage('products-2.php')">Product 2</p>
</li>
<li>
<p class="navLink" onclick="changePage('products-3.php')">Product 3</p>
</li>
</ul>
</li>
<li id="rootNews">
News
</li>
<li id="rootCompany" onclick="showMenu(this)">Company ∨
<ul id="Company">
<li>
<p class="navLink" onclick="changePage('./company-aboutUs.php')">About Us</p>
</li>
<li>
<p class="navLink" onclick="changePage('./company-contactUs.php')">Contact
Us</p>
</li>
</ul>
</li>
</ul>
CSS: (formatting didn't work on here)
http://pastebin.com/raw.php?i=CjyQhXCs
Try using position: relative and z-index: 100 on the id=nav div. Z-indexes work in layers. If the parent of an element has a z-index of 0, and the that element has a z-index of 100, the element would still appear behind another element that is the sibling of the parent with a z-index of 1.
The issue was a direct result of using the filter on the #navul ul. Somewhere in its calculations IE makes the element automatically hide any overflow. To fix, move the background to its own element and absolutely position it.
http://jsfiddle.net/uTBZN/30/
Credit to:
How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?
Just like #Stu, I had a filter on my nav ul (in my case, .navbar):
.navbar {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#64d7f4',GradientType=0 ); /* IE6-9 */
}
Per #Greg, as soon as I removed that filter, the dropdown menu stayed on top of the page content in IE9. Thank you, saved my day!