Styling menu button in tablet/mobile version

  • Resolved longabaugh

    (@longabaugh)


    10 years, 3 months ago

    I added a “blog” button to my menu, but i have problem styling it in tablet/mobile version, screen width less than 979, (when the menu collapse).

    Here my site
    In width less than 979 if you then click to open the menu, the “blog” button text is underlined and when hovered get selected. I can’t find which selector need to tweak to solve this.

    The actual css regarding the green button.
    I added the classes btn btn-mini btn-primary, plus the personalized blog-yoga

    .navbar .nav li.blog-yoga.btn {
    position: relative; bottom: 0.8em;
    padding: 0.2em 1.8em 0.2em 0.2em; line-height: 200%;
    }
    .navbar .nav li.blog-yoga.btn a {
    color: #FFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.31);
    padding: 0.2em 1em;
    }
    @media all and (max-width: 979px){
    .navbar .nav li.blog-yoga.btn {
    float: left;
    margin-left: 0.8em;
    margin-top: 0.8em;
    }
    }

Viewing 4 replies - 1 through 4 (of 4 total)

  • Have you tried specifying the dimensions in px (pixels) rather than em’s?

    Thread Starter longabaugh

    (@longabaugh)

    Yes, already tried and that’s not gonna solve the problem. Thanks for your suggestion.

    @media all and (max-width: 979px){
    .nav .blog-yoga.btn a {
        border-bottom: none;
    }
    .nav .blog-yoga.btn a:hover {
        background: transparent;
    }
}

    Is this what you wanted?

    Thread Starter longabaugh

    (@longabaugh)

    Thank you so much ?? That’s exactly it ?? It was just under my nose and I couldn’t see it, I feel a little stupid… was trying to search the original class responsible for that, to modify it’s behavior, when I could just add it in my class… thanks again ??
    I mark it as resolved ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Styling menu button in tablet/mobile version’ is closed to new replies.