Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Menu links are only clickable under the text

ezbryan1ezbryan1 New
edited September 2014 in Vanilla 2.0 - 2.8

I am using the bitter sweet template and just editing a few colors. I changed the size of the text in the menu but now the link area is under the text. Can someone please help me? My forum is forum.ezairride.com

My CSS:
You can see I only changed colors and the font size

#Head .SiteMenu a {
   font-size: 18px;
   font-weight: 400;
   color: #fff;
   padding: 17px 0;
   margin: 0 30px;
   display: inline-block;
}
#Head .SiteMenu a:first-child {
   margin-left: 0;
}
#Head .SiteMenu a:hover {
   color: #222;

Comments

  • This should fix it:

    .SiteTitle {
         line-height: 1;
     }
    
  • Bleistivt thanks for the help but that did not work.

  • peregrineperegrine MVP
    edited September 2014

    two things - you should clone a theme. not modifiy a core theme - in my opinion. Since the next time you upgrade you will overwrite all your changes.

    also you have an error in your custom.css

    @font-face {
      font-family: 'Bitter';
      font-style: normal;
      font-weight: 400;
      src: local('Bitter-Regular'), url('http://themes.googleusercontent.com/static/fonts/bitter/v3/2PcBT6-VmYhQCus-O11S5-vvDin1pK8aKteLpeZ5c0A.woff') format('woff');
    }
    body,
    .SiteTitle,
    h1, h2, h3, h4, h5 {
       font-family: Bitter, 'lucida grande','Lucida Sans Unicode',tahoma,sans-serif;
       line-height: 1;
    }
    a {
       color: dd2e29;     //   here is your error.
    }
    a:hover {
       color: #dd2e29;
    }
    

    see the discussions on how to clone theme, and css validation.

    you may have more errors - but that shows that what you said you did is not the only change !

    you also have a weird thing going on with your banner presentation - did you add it via the dashboard or modify the default.master.tpl.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • I appreciate the help but that did not fix my issue. If you don't mind check out the forum at forum.ezairride.com. When you try to click on a menu link the text will not click. It only becomes clickable under the text as if the padding is the link. This is seriously the weirdest bug I have ever encountered.

  • peregrineperegrine MVP
    edited September 2014

    you need to fix your css and re-read my edited thread.

    I appreciate the help but that did not fix my issue.

    yes, but you never say what you did, you just say did not fix.

    did you clone the theme or only just remove one of the errors that was pointed out.

    best to clone start over from fresh css.

    and a fresh default.master.tpl.

    I changed the font size on my clone of bittersweet, added your banner via dashboard and it works perfectly as far as I can tell on my clone.

    you did not clone the theme - I have a hard time helping people doing incorrect things.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • It's a simple CSS bug, the line height of the SiteTitle is 100px making it extend over the menu.
    What I gave you works, I tested it out in the browser console.

    You need to add that at the end of your custom.css file or add an !important, so it overwrites the existing style.

    Please follow peregrines advice and clone an existing theme and make your changes to that theme and not the one that is shipped with the vanilla core.

  • peregrineperegrine MVP
    edited September 2014

    I see the problem as the Banner was changed to height: 150px;

    and then it was riding on top of the menu bar.

    adding the z-index on the banner with your changes

    would fix it. I'm no expert. but thats what I see,

    .Banner {
        background-color: #333;
        height: 150px;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
        position: relative;
        text-align: left;
        z-index: -1;
    }
    

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Try this , there is some code which is making it line-height 1 for the body and also the site title . In order to override that you need to add this and you link should work fine.

    edit line 43 to this

    .SiteTitle {
    font-size: 40px;
    font-weight: bold;
    line-height: .5!important;
    }
    
  • Thank you for the suggestions every one. I will clone the site and try them all out. Sorry it took so long for me to write back, I have been out of town.

Sign In or Register to comment.