WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > problems with bottom nav, last child of < li >

Reply
  Thread Tools Display Modes
Old 26th October 17, 12:58 AM   #1
hmds
WLC Lover
 
Join Date: Jul 2009
Location: Seattle
Posts: 85
Default problems with bottom nav, last child of < li >

I am having a problem with getting the last child of a list to not show a bullet. I am using bootstrap 3.3.7. I have tried all manner of things that I can think of to make the last-child element work.

here is my code.

HTML Code:
<footer>
 <div class="foot1">
  <div class="foot2">
   <ul>
    <li>Home</li>
    <li>Types of Memorials</li>
    <li>Granite Colors & Designs</li>
    <li>Gallery</li>
    <li>Who We Are</li>
    <li>Contact</li>
    <li><a href="http://131.191.87.12/">Partner Sign-In</a></li>
   </ul>
  </div>
 </div>   
</footer>
Code:
footer {
  margin-top: 20px;
}

.foot1{
  height: 391px;
  background-image: url(../images/footer-1-1200.png);
}

.foot2 {
  background-image: url(../images/footer-1200.png);
  height: 176px;
  text-align: center;
}

.foot2 ul {
  margin-top: 70px;
  list-style-type: none;
  display: inline-block;
}

.foot2 li {
  float: left;
  padding-right: 15px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
}

.foot2 ul li:after {
   content: "|";
   padding-left: 15px;
}

.foot2 ul last-child{
  list-style-type: none;
}
hmds is offline   Reply With Quote
Old 2nd November 17, 11:23 PM   #2
Gimli
WLC Member
 
Join Date: Oct 2017
Location: South Africa
Posts: 8
Default Re: problems with bottom nav, last child of < li >

Hi Mate , i dont see bullets, only a menu with your link showing in blue and underlined, if you want that link to show normal like all your other links just grab and add this add this to your existing css ... the last line in the css is for bullets , thats if i missed something in your initial question.
Code:
.foot2 ul a {
	text-decoration:none;
	color: inherit;
        list-style-type: none;
}
Hope it helps let me know

Whooopes seems ive misunderstood your meaning of bullets i.e the pipes .... Disregard this code. Sorry guy

Cheers

Last edited by Gimli; 3rd November 17 at 12:59 AM.
Gimli is offline   Reply With Quote
Old 3rd November 17, 12:48 AM   #3
spikemeister
WLC Lover
 
spikemeister's Avatar
 
Join Date: Mar 2008
Location: Ireland
Posts: 54
Default Re: problems with bottom nav, last child of < li >

Hi. I think I understand what you are trying todo. Remove the last bullet point from after the last menu item. It may not be the most elegant solution however it does work. I will repost if i can find a cleaner solution.

Code:
.foot2 ul li:nth-child(7):after {
content:"";
}
spikemeister is offline   Reply With Quote
Old 3rd November 17, 09:10 AM   #4
spikemeister
WLC Lover
 
spikemeister's Avatar
 
Join Date: Mar 2008
Location: Ireland
Posts: 54
Default Re: problems with bottom nav, last child of < li >

Another solution would be to add a border on the left of each menu item.

Code:
#footerMenu {
   list-style:none;
}

#footerMenu li {
  padding: 0 8px;
  border-left: solid 1px blue;
  float: left;
  padding-right: 15px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
}

#footerMenu li:first-child{
  border-left:none;
}
Then the list would start
Code:
<ul id = "footerMenu">
spikemeister is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 08:25 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.