WordPress.org

Forums

Showing icons in nav menu (20 posts)

  1. J M
    Member
    Posted 2 years ago #

    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).

  2. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    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?

  3. J M
    Member
    Posted 2 years ago #

    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!

  4. Andrew
    Nuh uh moderator
    Posted 2 years ago #

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

  5. J M
    Member
    Posted 2 years ago #

    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.

  6. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    But there is no HTML supporting images to that position.

  7. J M
    Member
    Posted 2 years ago #

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

  8. Andrew
    Nuh uh moderator
    Posted 2 years ago #

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

  9. J M
    Member
    Posted 2 years ago #

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

  10. J M
    Member
    Posted 2 years ago #

    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?

  11. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Which elements are you applying the CSS to?

  12. J M
    Member
    Posted 2 years ago #

    #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").

  13. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    So which element has the class, "br" because it's not in your page.

  14. J M
    Member
    Posted 2 years ago #

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

  15. J M
    Member
    Posted 2 years ago #

    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?

  16. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    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'.

  17. J M
    Member
    Posted 2 years ago #

    This is what I'm seeing:

    <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-blog-container><ul id=menu-blog class=menu><li id=menu-item-18 class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="/?page_id=6">About</a></li>
    <li id=menu-item-26 class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26"><a href="/?cat=14">Blog</a></li>
    <li id=menu-item-19 class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="/?page_id=8">Resources</a></li>
    <li id=menu-item-171 class="fr menu-item menu-item-type-taxonomy menu-item-object-category menu-item-171"><a href="/?cat=4">French</a></li>
    <li id=menu-item-172 class="es menu-item menu-item-type-taxonomy menu-item-object-category menu-item-172"><a href="/?cat=5">Spanish</a></li>
    <li id=menu-item-173 class="it menu-item menu-item-type-taxonomy menu-item-object-category menu-item-173"><a href="/?cat=7">Italian</a></li>
    <li id=menu-item-174 class="catalonia menu-item menu-item-type-taxonomy menu-item-object-category menu-item-174"><a href="/?cat=6">Catalan</a></li>
    <li id=menu-item-175 class="br menu-item menu-item-type-taxonomy menu-item-object-category menu-item-175"><a href="/?cat=8">Brazilian Portuguese</a></li>
    </ul></div>	</nav><!-- #access -->
    </header><!-- #branding -->
  18. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Your custom CSS styles aren't including into the page.

  19. J M
    Member
    Posted 2 years ago #

    No, I used shift, ctrl, R5 in FF to refresh cache. I've just emptied the cache of W3 Total Cache to see if that helps.

  20. J M
    Member
    Posted 2 years ago #

    Your custom CSS styles aren't including into the page.

    Any idea why not?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags