Support » Themes and Templates » Showing icons in nav menu

  • J M

    (@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)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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

    (@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!

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

    J M

    (@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.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    But there is no HTML supporting images to that position.

    J M

    (@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?!

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

    J M

    (@hiphopinenglish)

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

    J M

    (@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?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Which elements are you applying the CSS to?

    J M

    (@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”).

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

    J M

    (@hiphopinenglish)

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

    J M

    (@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?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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.