Okay
  Public Ticket #1548261
custom li in header nav and custom bullet points
Closed

Comments

  • Aleah Niemcyk started the conversation
    April 20, 2018 at 9:06am

    Hi, I'm trying to do two things and have a couple of glitches. 

    1) Styling the last list item in the main nav to look like a button. The last child selector doesn't seem to be working. I also haven't yet figured out how to reduce the height.

    body header#top nav > ul > li > a:last-child {
        background-color: #ba000b;
        border-radius: 10px 0px 10px 10px !important;
    }

    2) Add custom font-awesome bullet point. The caret has been added successfully, but how can I remove the circle bullet-point? 

    .main-content li:before {    
        font-family: 'FontAwesome';
        content: '\f0da';
        margin:0 10px 0 0px;
    }

    Thanks in advance for your help!



  •  8,402
    Tahir replied
    April 20, 2018 at 1:43pm

    Hey Again,

    Use this option and then adjust it with css : http://themenectar.com/docs/salient/header-button-links/ . 

    Be.st

    ThemeNectar Support Team 

  • Aleah Niemcyk replied
    April 20, 2018 at 2:03pm

    Great, I forgot about that option. I'm not finding the correct selectors for this button.

    I've tried the following:

    header a.button-solid-color {
        border-radius: 10px 0px 10px 10px !important;
    }

    Also, on topic #2, how can I remove the bullet points of the traditional UL? 


  •  2,721
    Andrew replied
    April 22, 2018 at 2:27pm

    Hi Aleah,

    Apologies for the late reply.

    1) Try this CSS:

    header#top nav > ul.sf-menu > li:last-child > a:before{   border-radius: 10px 0px 10px 10px !important;
}

    2) Where is this on your site we see what can be done with CSS?

    Thanks.

  • Aleah Niemcyk replied
    April 24, 2018 at 10:34am

    Andrew, on #2, bullet points...
    They're currently being used on this page: https://boosterex.aleahniemczyk.com/what-to-expect/

  •  8,402
    Tahir replied
    April 24, 2018 at 12:26pm

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    .main-content ul li {
    list-style: none !important;
}

    Thanks

    ThemeNectar Support Team