WordPress.org

Support

Support » Themes and Templates » Showing icons in nav menu

Showing icons in nav menu

  • J M
    Participant

    @hiphopinenglish

    I’m using a child theme I made of Twentyeleven.

    I’ve created some icons to go into my Nav menu – right aligned. In my opinion I’ve done things correctly, but they are not showing up at all.

    Here is alink to my CSS on Pastebin (relevant code rowards the bottom): http://pastebin.com/9yFk4Z2q.

    The site in question is: welearnlanguages.com

    According to the Page Source infr, the CSS is being loaded correctly, yet I see no buttons in my Nav Menu. What am I doing wrong?

    BTW: I entered the relevant CSS classes in the Menu (es for Spain, fr for French etc).

Viewing 15 replies - 1 through 15 (of 19 total)
  • Andrew Nevins
    Forum moderator

    @anevins

    What am I supposed to be looking for, what icons?
    I too see no icons in the navigation menu, where did you put them in?

    J M
    Participant

    @hiphopinenglish

    That’s the point, they’re not showing up! They were introduced in my style.css and the classes inserted into my menu, and the images uploaded to e.g. images/br.gif, but they’re not appearing on my site!

    Andrew Nevins
    Forum moderator

    @anevins

    Where exactly should they appear and what CSS have you used to display them?

    J M
    Participant

    @hiphopinenglish

    The CSS in the pastebin link from my first post ^^ (scroll to the bottom to see the relevant CSS. They should appear in the right of the Nav menu, to the left of the search bar.

    Andrew Nevins
    Forum moderator

    @anevins

    But there is no HTML supporting images to that position.

    J M
    Participant

    @hiphopinenglish

    Please explain. You lost me a bit.
    I had this technique working on a different site, and I followed the same steps. The html should be done by WordPress when I edit the Menus’ CSS class surely?!

    Andrew Nevins
    Forum moderator

    @anevins

    Your CSS is also applying styles to a class “br” but there are no elements with this class.

    J M
    Participant

    @hiphopinenglish

    Sh what should I do? (Thanks for help so far btw)

    J M
    Participant

    @hiphopinenglish

    So I’ve created the class in CSS and called it in the Menu Options. I don’t see where I’ve gone wrong, unless something hasn’t updated properly?

    Andrew Nevins
    Forum moderator

    @anevins

    Which elements are you applying the CSS to?

    J M
    Participant

    @hiphopinenglish

    #access .br {
    width: 11px;
    text-align: center;
    float: right;
    }
    .br,
    #access .br:hover >a,
    #access .br a:focus
    {
    background: url(‘images/br.gif’);
    background-repeat: no-repeat;
    padding: 0;
    }
    .br a
    {
    color: transparent !important;
    padding: 0;
    left: -9999;
    }

    ^^ this (in my opinion) should describe where and how the image called br.gif should go. I apply this to the Menu button I’ve created in the Menu Options panel of Dasboard, calling it’s CSS id (in this case “br”).

    Andrew Nevins
    Forum moderator

    @anevins

    So which element has the class, “br” because it’s not in your page.

    J M
    Participant

    @hiphopinenglish

    A menu button called Brazilian Portuguese. That’s what I’ve told WordPress to do anyway.

    J M
    Participant

    @hiphopinenglish

    Massive apologies! Menu now correctly selected. Sorry again, hadn’t chosen my Custom Menu to show.

    However! The images are still not showing. Any ideas why not?

    Andrew Nevins
    Forum moderator

    @anevins

    This is your header HTML code from the header.php file;

    <header id="branding" role="banner">
    <hgroup>
    <h1 id="site-title"><span><a href="/" title="We Learn Languages" rel="home">We Learn Languages</a></span></h1>
    <h2 id="site-description">Tips, tricks and thoughts</h2>
    </hgroup>
    <a href="/">
    <img src="http://cdn.welearnlanguages.com/wp-content/uploads/2012/08/WeLL1.gif?9d7bd4" width="1200" height="264" alt="">
    </a>
    <div class="only-search with-image">
    <form method="get" id="searchform" action="http://www.welearnlanguages.com/">
    <label for="s" class="assistive-text">Search</label>
    <input type="text" class="field" name="s" id="s" placeholder="Search">
    <input type="submit" class="submit" name="submit" id="searchsubmit" value="Search">
    </form>
    </div>
    <nav id="access" role="navigation">
    <h3 class="assistive-text">Main menu</h3>
    <div class="skip-link"><a class="assistive-text" href="#content" title="Skip to primary content">Skip to primary content</a></div>
    <div class="skip-link"><a class="assistive-text" href="#secondary" title="Skip to secondary content">Skip to secondary content</a></div>
    <div class="menu"><ul><li class="current_page_item"><a href="/" title="Home">Home</a></li><li class="page_item page-item-23"><a href="/?page_id=23">Blog</a></li><li class="page_item page-item-8"><a href="/?page_id=8">Resources</a></li><li class="page_item page-item-6"><a href="/?page_id=6">About</a><ul class="children"><li class="page_item page-item-41"><a href="/?page_id=41">About Joe</a></li><li class="page_item page-item-39"><a href="/?page_id=39">About Ric</a></li></ul></li></ul></div>
    </nav><!-- #access -->
    </header>

    There is still no HTML element with the class ‘br’.

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Showing icons in nav menu’ is closed to new replies.