Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #208949

    Top of the morning guys,

    Wondering how I might go about stylizing my custom menu button that I started at http://codelessme.com/paidfairly to look like the attached image.

    upload button

    Thanks in advance!
    David

    #208967

    Hey David!

    Please use this on your custom.css or Quick CSS to adjust the height of the menu list:

    .main_menu ul:first-child > li a {
    height: 40px !important;
    line-height: 40px !important;
    }

    Add this to move the main menu position:

    #avia-menu {
    position: relative;
    top: 30px;
    }

    Cheers!
    Ismael

    #209013

    Hey Ismael,

    Thanks for that.

    I’m getting somewhere, but changing the height changes the height of the menu itself and I don’t want to do that. You can see now that I have positioned http://codelessme.com/paidfairly.

    This is what I have in quick:

    #header_main .container,.main_menu ul:first-child > li a {
    height: 85px !important;
    line-height: 65px !important;
    }
    
    #avia-menu {
    position: relative;
    top: 8px;
    }
    
    .fixed_header #main {
        padding-top: 85px;
    }

    The heading is a fixed height.

    #209017

    Also –

    I need to keep the text for that menu link as white with no hover effect on text.

    #209099

    Hi!

    Please add following code to Quick CSS as well

    .main_menu ul:first-child>li#menu-item-232>a { color: white!important; }

    This should change the color of login text. Can you post a screenshot and show how you would like that button to look?

    Best regards,
    Yigit

    • This reply was modified 3 months ago by  Yigit.
    #209137

    Hey Yigit – I did at the top of this thread. The only thing that needs to change is the height of JUST the blue background, but nothing else. I want it reduced by about 3px above and below the nav link.

    Thanks!

    #209143

    Hey!

    Please add following code to Quick CSS

    .menu_login { height: 45px; margin-top: 10px; }
    .menu_login a { line-height: 45px!important; }

    Cheers!
    Yigit

    #209148

    Come to find out – I had set the height of the background as part of the button class…hence the reason it wasn’t changing.

    Here is the final result which works:

    #header_main .container,.main_menu ul:first-child > li a {
    height: 85px !important;
    line-height: 42px !important;
    }
    
    #avia-menu {
    position: relative;
    top: 24px;
    }
    
    .menu_login {
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0px;
      font-family: Arial;
      color: #ffffff!important;
      background: #3ba1f1;
      text-decoration: none;
      height: 40px;
    }
    
    .menu_login:hover {
      background: #3cb0fd;
      text-decoration: none;
    }
    
    .main_menu ul:first-child>li#menu-item-232>a { color: white!important; }

    Thanks for the help!

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘enfold > menu > login button’ is closed to new replies.