Menu underline effects

  • Author
    Posts
  • #140241

    abbysnyder
    Member

    What CSS do I use to make my menu bar work like this site’s menu (https://www.215marketing.com/portfolio/) with the effects, underline, and color? I’m close to it, but not exactly..

    This is the code I have so far:

    .main-menu a { color: #545454; }
    .main-menu a:hover {
    border-bottom: 1px solid #76a2d5;

    }

    .main-menu li li { background: #ffffff; }

    .main-menu a { color: #545454; }
    .main-menu > ul > li:hover > a,
    .main-menu > ul > li.current-menu-item > a,
    .main-menu > ul > li.current-menu-ancestor > a { color: #76a2d5; }

    The blog I need help with is vantageptcreatives.com.

    #140242

    abbysnyder
    Member

    Is it also possible to make the underline shorter in length like this site (https://www.viget.com/about/)? Not that short, but shorter under the text.

    #140263

    anhtnt
    Theme Author

    Hi,

    Please try this CSS:

    .main-menu a {
        position: relative;
    }
    .main-menu a:after {
        content: '';
        display: block;
        margin: 0 auto;
        width: 40px;
        height: 2px;
        background: #76a2d5;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        transition: all .2s;
        transform: scale(0,1);
    }
    .main-menu a:hover:after {
        transform: scale(1,1);
    }
    #140277

    abbysnyder
    Member

    So this is everything I have for the nav bar:

    .navbar {
      position: fixed;
      width: 100%;
      background: #ffffff;
      top: 0;
      padding-top: 20px;
      padding-bottom: 20px;
    	border-bottom: 2.6px solid #eaeaea
    }
    
    .main-menu a { color: #303030; }
    .main-menu a:hover {
     border-bottom: 1px solid #76a2d5;
    	
    }
    	
    .main-menu li li { background: #ffffff; }
    
    .main-menu a { color: #303030; }
    .main-menu > ul > li:hover > a,
    .main-menu > ul > li.current-menu-item > a,
    .main-menu > ul > li.current-menu-ancestor > a { color: #76a2d5; }
    
    .menu-toggle {
    	background: #ffffff;
    	width: 30px;
    	height: 30px;
    }
    
    .menu-toggle:before {
    	background: #ffffff;
    	width: 20px;
    	border-top: 2.8px solid #303030;
    	border-bottom: 8px double #303030;
    }

    When I took all that out and replaced it with yours the bottom padding got longer. When I took anything that said .menu[….] out it turned the text white and you could not see anything.

    • This reply was modified 7 months by  anhtnt.
    #140333

    anhtnt
    Theme Author

    Hi,

    Sorry for not making it clear. Please append my CSS to yours. Don’t remove your existing CSS, since I tried adding new CSS.

    #140351

    abbysnyder
    Member

    Thank you! It worked

The topic ‘Menu underline effects’ is closed to new replies.