0

First, I would be glad if u tell me how can I assign a class(css) to default span tag that include the links inside the menu, created by WP control panel.

And second question is how to use @media queries to define different style of links inside a menus? If I'm using an image instead of the text in the menu, how can I apply different img for another resolution? Say, I got IMG_1 for higher than 999px width screen and IMG_2 for less than 999px screen. I definitely can't just img url from css... so how to make it work? I don't want to use background image as for link, it's ugly :/

Thanks!

UPDATE: Okay, so I think I answered my self the second question. I used span(in order not to go with div inside the span-the default tag comes with WP :/ ) as inline block element, and assign width and height to it, and use background image in the css. This way I can sure to make it with hover effect and also use proper @meta.

  • Can't you just target that span with css? You don't need additional classes for that. – dingo_d May 26 '15 at 12:57
  • Well, the reason for that is I want it to behave like div, it can't no matter what I would do, so the best thing is at least assign a class to it so it would work as block element. I know it's a bad practice, but there's no way to change this span for div, right? :/ – densssky May 26 '15 at 13:13
  • What do you mean 'behave like a div'? You mean instead of being inline element to be block element? In any case, you can target the span element. Depending on your HTML structure it could be something like this: nav > ul > li > a > span{display:block;} – dingo_d May 26 '15 at 13:18
  • Thanks, dingo! Your answer is very helpful, can't mark it as right answer because its a comment :/ and yes, for the question about inline element to be a block element. – densssky May 26 '15 at 13:32
0

If you want your navigation span element to be a block, instead of inline element, just target it via css

nav > ul > li > a > span{
    display:block;
}

This is providing your HTML structure looks something like this:

<nav>
    <ul>
        <li>
            <a href="#" class="menu-link">
                <span>Home</span>
            </a>
        </li>
        <!-- other list elements go here -->
    </ul>
</nav>

Hope this helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.