A graphic designer provided me with these elements to incorporate into the HTML design.
Everything was going smoothly until I encountered the faint, uneven borders on the LI tags, especially when dealing with a list containing only five items.
If anyone can guide me on the best way to address this issue using SASS/CSS, that would be greatly appreciated! Please refer to the provided links for more information. The rest of the styling is fine; it's just those small, irregular borders causing concern. My goal was to create a fluid layout where removing the 6th li item from the unordered list transitions seamlessly between two figures.
Here is my current HTML code:
<div class="full-screen-nav">
<div class="container main-nav">
<div class="col-xs-12">
<ul class="menu">
<li class="menu_item"><a href="#clickme"><span class="menu_itemText">Products</span></a></li>
<li class="menu_item"><a href="#"><span class="menu_itemText">Learn</span></a></li>
<li class="menu_item"><a href="#"><span class="menu_itemText">Manage</span></a></li>
<li class="menu_item"><a href="#"><span class="menu_itemText">Advice</span></a></li>
<li class="menu_item"><a href="#"><span class="menu_itemText">News</span></a></li>
<li class="menu_item"><a href="#"><span class="menu_itemText">Retirement</span></a></li>
</ul>
</div>
</div>
</div>
And here is my SCSS code:
// Universal Styles for Full Page nav elements
.full-screen-nav {
background-color: $slate;
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 2;
color: #fff;
ul {
margin: 0;
padding: 0;
li {
list-style-type: none;
padding: 0;
margin: 0;
}
}
.menu {
font-size: 0;
padding: 0;
margin: 0;
.menu_item {
font-size: 10pt;
width: 33%;
display: inline-block;
color: #FFF;
text-align: center;
border-right: 1px solid rgba(255, 255, 255, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
.menu_itemText {
padding: 100px 0 10px 0;
display: inline-block;
}
&:nth-child(3n){
border-right: 0;
}
&:nth-child(n+4){
border-bottom: 0;
}
&:nth-child(4):after, &:nth-child(5):after {
content: "";
color: red;
position: absolute;
right: -16px;
background: $slate;
padding: 16px;
top: -16px;
}
}
}
}
// Unique Navigation
.unique-nav {
.container {
background-color: transparent;
}
h2 {
background: url(#{$assets}/icons/chevron.svg) no-repeat 0 0;
}
.menu {
li {
background-repeat: no-repeat;
background-size: 70px;
background-position: center 20px;
&:first-child {background-image: url(#{$assets}/menu/products.svg) }
&:nth-child(2) {background-image: url(#{$assets}/menu/products.svg) }
&:nth-child(3) {background-image: url(#{$assets}/menu/manage.svg) }
&:nth-child(4) {background-image: url(#{$assets}/menu/investments.svg) }
&:nth-child(5) {background-image: url(#{$assets}/menu/news.png) }
&:nth-child(6) {background-image: url(#{$assets}/menu/retirement.svg) }
}
}
}
Thank you!