Tagged: , , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 13, 2014 at 2:48 pm #208949
    zerozendesign

    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

    January 13, 2014 at 3:14 pm #208967
    Ismael

    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

    January 13, 2014 at 4:21 pm #209013
    zerozendesign

    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.

    January 13, 2014 at 4:23 pm #209017
    zerozendesign

    Also –

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

    January 13, 2014 at 6:42 pm #209099
    Yigit

    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 10 years, 11 months ago by Yigit.
    January 13, 2014 at 8:09 pm #209137
    zerozendesign

    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!

    January 13, 2014 at 8:22 pm #209143
    Yigit

    Hey!

    Please add following code to Quick CSS

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

    Cheers!
    Yigit

    January 13, 2014 at 8:39 pm #209148
    zerozendesign

    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!

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘enfold > menu > login button’ is closed to new replies.