WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven - images replacing menu text - but 1 problem with submenu (27 posts)

  1. Niki Campbell
    Member
    Posted 1 year ago #

    Hello!

    I have created an icon based main menu in Twenty Eleven using a background image replacement. It is all working perfectly well except for 1 state in Firefox:

    The sub-navigation text >> when clicked-on, it inherits the parent-menu-item image sprite. How can I eliminate this?

    Thanks, any help would be greatly appreciated - I am so close.

    http://minimeinthehills.com.au/

    Cheers!
    Niki

  2. zartgesotten
    Member
    Posted 1 year ago #

    Try deleting
    background-position: -625px -125px;
    in Line 323 of your css file.
    Cheers
    Anja

  3. Niki Campbell
    Member
    Posted 1 year ago #

    Thanks for your quick response - but that was not it (that was a css mistake of my own) - but I got it!

    (In case this will help someone in the future)...here is the CSS that fixed it to override the parent menu background:

    #access ul ul li.menu-item-object-page a:focus, #access ul ul li.menu-item-object-page a:active {background-image: none; height: 28px; width: 178px; text-indent: 0px; padding: 10px 0px 0px 10px; background-color: #ddd;}

  4. lizannehart
    Member
    Posted 1 year ago #

    I have a created a sprite image that I would like to use to replace my navigational menu in twenty eleven. I have the sprite uploaded under twentyelevenchild/images, and I have what I believe is proper XHTML and CSS code. But I don't know where to place each piece to pull it all together. The site is still in maintenance mode. Can anyone help?

    XHTML:

    <ul id="navigation">
    		<li id="navigation-1"><a href="http://www.rosemaryahern.com" title="Home"><span>Home</span></a>
    		<li id="navigation-2"><a href="http://www.rosemaryahern.com/about" title="About"><span>About</span></a>
    		<li id="navigation-3"><a href="http://www.rosemaryahern.com/services" title="Services"><span>Services</span></a>
    		<li id="navigation-4"><a href="http://www.rosemaryahern.com/testimonials" title="Testimonials"><span>Testimonials</span></a>
    		<li id="navigation-5"><a href="http://www.rosemaryahern.com/books-by" title="Books By"><span>Books By</span></a>
    		<li id="navigation-6"><a href="http://www.rosemaryahern.com/contact" title="Contact"><span>Contact</span></a>

    CSS:

    /* HORIZONTAL NAVIGATION BAR
    /////////////////////////////////////*/
    
    ul#navigation {
    	width:410px;
    	list-style:none;
    	height:20px
    }
    
    ul#navigation li {
    	display:inline
    }
    
    ul#navigation li a {
    	height:20px;
    	float:left;
    	text-indent:-9999px;
    	text-decoration:none
    }
    
    ul#navigation  li a span {
    	float:left;
    	display:block
    }
    
    ul#navigation li#navigation-1 a {
    	width:65px;
    	background:url(Menu_Master-19.jpg) no-repeat 0px 0
    }
    
    ul#navigation li#navigation-1 a:active,
    ul#navigation li#navigation-1 a:hover {
    	background-position:0px -20px
    }
    ul#navigation li#navigation-1 a.current {
    	background-position:0px -40px
    }
    
    ul#navigation li#navigation-2 a {
    	width:65px;
    	background:url(Menu_Master-19.jpg) no-repeat -65px 0
    }
    
    ul#navigation li#navigation-2 a:active,
    ul#navigation li#navigation-2 a:hover {
    	background-position:-65px -20px
    }
    ul#navigation li#navigation-2 a.current {
    	background-position:-65px -40px
    }
    
    ul#navigation li#navigation-3 a {
    	width:65px;
    	background:url(Menu_Master-19.jpg) no-repeat -130px 0
    }
    
    ul#navigation li#navigation-3 a:active,
    ul#navigation li#navigation-3 a:hover {
    	background-position:-130px -20px
    }
    ul#navigation li#navigation-3 a.current {
    	background-position:-130px -40px
    }
    
    ul#navigation li#navigation-4 a {
    	width:85px;
    	background:url(Menu_Master-19.jpg) no-repeat -195px 0
    }
    
    ul#navigation li#navigation-4 a:active,
    ul#navigation li#navigation-4 a:hover {
    	background-position:-195px -20px
    }
    ul#navigation li#navigation-4 a.current {
    	background-position:-195px -40px
    }
    
    ul#navigation li#navigation-5 a {
    	width:65px;
    	background:url(Menu_Master-19.jpg) no-repeat -280px 0
    }
    
    ul#navigation li#navigation-5 a:active,
    ul#navigation li#navigation-5 a:hover {
    	background-position:-280px -20px
    }
    ul#navigation li#navigation-5 a.current {
    	background-position:-280px -40px
    }
    
    ul#navigation li#navigation-6 a {
    	width:65px;
    	background:url(Menu_Master-19.jpg) no-repeat -345px 0
    }
    
    ul#navigation li#navigation-6 a:active,
    ul#navigation li#navigation-6 a:hover {
    	background-position:-345px -20px
    }
    ul#navigation li#navigation-6 a.current {
    	background-position:-345px -40px
    }

    [please remember to mark any posted code -http://codex.wordpress.org/Forum_Welcome#Posting_Code ]

  5. Niki Campbell
    Member
    Posted 1 year ago #

    try this, it's what worked for me: do each code for each menu item ## and change that background position accordingly

    1. replace text with image

    #menu-item-95 a {
    display:block; height:125px; width:69px; padding:0px; outline:none; text-indent:-9999px;
    background-image:url('images/nav2.gif'); background-position:0px 0px;
    }

    2. If you want a hover state

    /* Hover */
    #access li.menu-item-95.menu-item-object-page:hover > a, #access ul ul:hover > a, #access li.menu-item-95.menu-item-object-page a:focus {
    display:block; height:125px; width:69px; padding:0px; outline:none; text-indent:-9999px;
    background-image:url('images/nav2.gif'); background-position:0px -125px;
    }

    3.keep hover state when on active page

    /* =Menu - maintain ACTIVE STATE when it is the current page/sub-menu
    -------------------- */

    #access li.current-menu-item.menu-item-95 > a, #access li.current-menu-ancestor.menu-item-95 > a, #access li.current_page_item.menu-item-95 > a, #access li.current_page_ancestor.menu-item-95 > a
    { background-image:url('images/nav2.gif'); background-position:0px -125px; }

  6. lizannehart
    Member
    Posted 1 year ago #

    Thanks Nicki! I should explain that I got the code from an automatic generator I found online for sprite images (I'm not a coder). My question is super basic. Where do I put this information? In which document (or documents) in my child theme and where (exactly)?

  7. Niki Campbell
    Member
    Posted 1 year ago #

    In your child theme style.css -

    First get the menu-item-numbers by selecting the menu in your browser and looking at the source code. each menu item has a unique number.

    Copy the code above and paste for each menu-item-## - try it for jsut a couple of them first to make sure it is displaying - change:

    : the width/height to reflect the width of that menu items portion of the graphic to be seen.

    it should work no problem - let me know how it goes :)

  8. lizannehart
    Member
    Posted 1 year ago #

    ok. seems easy, but not quite working. i copied and updated code for the first 2 of 6 menu items, but now they have disappeared completely from view. the old text is not showing, but neither are the new images. following is the code i added to the child theme style.css. any thoughts?

    #menu-item-246 a {
    display:block; height:20px; width:65px; padding:0px; outline:none; text-indent:-9999px;
    background-image:url('Menu_Master-19.jpg'); background-position:0px 0px;
    }
    /* Hover */
    #access li.menu-item-246.menu-item-object-page:hover > a, #access ul ul:hover > a, #access li.menu-item-246.menu-item-object-page a:focus {
    display:block; height:20px; width:65px; padding:0px; outline:none; text-indent:-9999px;
    background-image:url('Menu_Master-19.jpg'); background-position:0px -20px;
    }
    /* =Menu - maintain ACTIVE STATE when it is the current page/sub-menu
    -------------------- */
    
    #access li.current-menu-item.menu-item-246 > a, #access li.current-menu-ancestor.menu-item-246 > a, #access li.current_page_item.menu-item-246 > a, #access li.current_page_ancestor.menu-item-246 > a
    { background-image:url('Menu_Master-19.jpg'); background-position:0px -40px;
    }
    #menu-item-260 a {
    display:block; height:20px; width:65px; padding:0px; outline:none; text-indent:-9999px;
    background-image:url('Menu_Master-19.jpg'); background-position:-65px 0px;
    }
    /* Hover */
    #access li.menu-item-260.menu-item-object-page:hover > a, #access ul ul:hover > a, #access li.menu-item-246.menu-item-object-page a:focus {
    display:block; height:20px; width:65px; padding:0px; outline:none; text-indent:-9999px;
    background-image:url('Menu_Master-19.jpg'); background-position:-65px -20px;
    }
    /* =Menu - maintain ACTIVE STATE when it is the current page/sub-menu
    -------------------- */
    
    #access li.current-menu-item.menu-item-260 > a, #access li.current-menu-ancestor.menu-item-260 > a, #access li.current_page_item.menu-item-260 > a, #access li.current_page_ancestor.menu-item-260 > a
    { background-image:url('Menu_Master-19.jpg'); background-position:-65px -40px;
    }
  9. lizannehart
    Member
    Posted 1 year ago #

    is this new code supposed to replace something?

  10. Niki Campbell
    Member
    Posted 1 year ago #

    where is your image sitting? what folder? you might not be referencing the image properly. Is it in an images folder? The code does not replace anything. Do you have URL to look at?

  11. lizannehart
    Member
    Posted 1 year ago #

    http://www.rosemaryahern.com/

    I momentarily deactivated maintenance mode (it's a site I'm designing for someone else).

    The image is sitting in wp-content/themes/twentyelevenchild/images/file name

  12. lizannehart
    Member
    Posted 1 year ago #

    i just added images/ to the image url. i think that was the right thing to do, but the images are still not visible.

  13. Niki Campbell
    Member
    Posted 1 year ago #

    okay, I tested it in firefox with firebug and the coding was not there.

  14. lizannehart
    Member
    Posted 1 year ago #

    I added it through the WordPress theme editor. What did I do wrong?

  15. Niki Campbell
    Member
    Posted 1 year ago #

    I don't know - it's hard to tell (not knowing your set-up). Right now I see the text navigation - but you say that the image is sitting in an images folder - so in the coding I would change that image link in the coding from Menu_Master-19.jpg to images/Menu_Master-19.jpg. That is assuming that the document that you are adding code to is in the parent folder to the images folder. Maybe try and absolute file reference - http://www.rosemaryahern.com/ wp-content/themes/twentyelevenchild/images/file name (for example)

    It seems at one point you got the text to shift off the screen with the coding: text indent -9999px, so it must have been referencing at that point. Try it again with the new filepath to the image.

    see if that works for just 1 menu item. Also try firebug - it is great tool to see what is going on behind the scenes (what code from which document is affecting your navigation)...but it is tough for me to know from the outside

  16. lizannehart
    Member
    Posted 1 year ago #

    Not working. I have 2 theories if you're still with me (I understand if not).

    1. I have the menu set up in my WP theme to appear as we are seeing it. Is that setting overriding the code above? Should I select something else as the menu preference under WP/Theme/Appearance?

    2. Is the Menu section of the parent twentyeleven theme conflicting with what we are trying to do? Here's the code:

    /* =Menu
    -------------------------------------------------------------- */
    
    #access {
    	background: #222; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#252525, #0a0a0a);
    	background: -o-linear-gradient(#252525, #0a0a0a);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
    	background: -webkit-linear-gradient(#252525, #0a0a0a);
    	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	clear: both;
    	display: block;
    	float: left;
    	margin: 0 auto 6px;
    	width: 100%;
    }
    #access ul {
    	font-size: 13px;
    	list-style: none;
    	margin: 0 0 0 -0.8125em;
    	padding-left: 0;
    }
    #access li {
    	float: left;
    	position: relative;
    }
    #access a {
    	color: #eee;
    	display: block;
    	line-height: 3.333em;
    	padding: 0 1.2125em;
    	text-decoration: none;
    }
    #access ul ul {
    	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	display: none;
    	float: left;
    	margin: 0;
    	position: absolute;
    	top: 3.333em;
    	left: 0;
    	width: 188px;
    	z-index: 99999;
    }
    #access ul ul ul {
    	left: 100%;
    	top: 0;
    }
    #access ul ul a {
    	background: #f9f9f9;
    	border-bottom: 1px dotted #ddd;
    	color: #444;
    	font-size: 13px;
    	font-weight: normal;
    	height: auto;
    	line-height: 1.4em;
    	padding: 10px 10px;
    	width: 168px;
    }
    #access li:hover > a,
    #access ul ul :hover > a,
    #access a:focus {
    	background: #efefef;
    }
    #access li:hover > a,
    #access a:focus {
    	background: #f9f9f9; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
    	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
    	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
    	color: #373737;
    }
    #access ul li:hover > ul {
    	display: block;
    }
    #access .current-menu-item > a,
    #access .current-menu-ancestor > a,
    #access .current_page_item > a,
    #access .current_page_ancestor > a {
    	font-weight: bold;
    }
    
    /* Search Form */
    #branding #searchform {
    	position: absolute;
    	top: 3.8em;
    	right: 7.6%;
    	text-align: right;
    }
    #branding #searchform div {
    	margin: 0;
    }
    #branding #s {
    	float: right;
    	-webkit-transition-duration: 400ms;
    	-webkit-transition-property: width, background;
    	-webkit-transition-timing-function: ease;
    	-moz-transition-duration: 400ms;
    	-moz-transition-property: width, background;
    	-moz-transition-timing-function: ease;
    	-o-transition-duration: 400ms;
    	-o-transition-property: width, background;
    	-o-transition-timing-function: ease;
    	width: 72px;
    }
    #branding #s:focus {
    	background-color: #f9f9f9;
    	width: 196px;
    }
    #branding #searchsubmit {
    	display: none;
    }
    #branding .only-search #searchform {
    	top: 5px;
    	z-index: 1;
    }
    #branding .only-search #s {
    	background-color: #666;
    	border-color: #000;
    	color: #222;
    }
    #branding .only-search #s,
    #branding .only-search #s:focus {
    	width: 85%;
    }
    #branding .only-search #s:focus {
    	background-color: #bbb;
    }
    #branding .with-image #searchform {
    	top: auto;
    	bottom: -27px;
    	max-width: 195px;
    }
    #branding .only-search + #access div {
    	padding-right: 205px;
    }
  17. Niki Campbell
    Member
    Posted 1 year ago #

    hmmm...I am not an expert - I just know what I know :) - the child style.css will over ride the parent though. But I don't know if your child theme is active - or where you are adding the new coding. I wish I could be more helpful! Without knowing what you are altering it is kind of impossible for me to know. Sorry I can't be of more help!

  18. lizannehart
    Member
    Posted 1 year ago #

    it is active, and contains only overrides to the code, as follows:

    /*
    Theme Name: twentyelevenchild
    Description: Child theme for the twentyeleven theme
    Author: Lizanne Hart
    Template: twentyeleven
    */
    
    @import url("../twentyeleven/style.css");
    
    /* Add your over ride rules below this line */
    
    body, input, textarea {
    	color: #000000;
    	font: 15px Helvetica, Arial, sans-serif;
    	font-weight: 300;
    	line-height: 1.625;
    }
    #access {
    	background: #fff; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#252525, #0a0a0a);
    	background: -o-linear-gradient(#252525, #0a0a0a);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
    	background: -webkit-linear-gradient(#252525, #0a0a0a);
    	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	clear: both;
    	display: block;
    	text-align: center;
    	margin: 0 auto 6px;
    	width: 100%;
    }
    #access ul {
    	font-size: 13px;
    	list-style: none;
    	margin: 0 0 0 -0.8125em;
    	padding-left: 0;
    	display: inline-block;
    }
    #access div {
    	margin: 0 0 0 0;
    }
    #access li:hover > a,
    #access ul ul :hover > a {
    border : none;
    background-color : #fff;
    color : #fff;
    text-decoration:none;
    }
    #access ul li:hover > ul {
    display: block;
    }
    #branding {
    border: none;
    }
    #branding {border-top: 0px solid #BBBBBB; }
    #access {box-shadow: none;
    }
    #menu-item-246 a {
    display:block; height:20px; width:65px; padding:0px; outline:none;
    background-image:url('http://www.rosemaryahern.com/wp-content/themes/twentyelevenchild/images/Menu_Master-19.jpg'); background-position:0px 0px;
    }
    /* Hover */
    #access li.menu-item-246.menu-item-object-page:hover > a, #access ul ul:hover > a, #access li.menu-item-246.menu-item-object-page a:focus {
    display:block; height:20px; width:65px; padding:0px; outline:none;
    background-image:url('http://www.rosemaryahern.com/wp-content/themes/twentyelevenchild/images/Menu_Master-19.jpg'); background-position:0px -20px;
    }
    /* =Menu - maintain ACTIVE STATE when it is the current page/sub-menu
    -------------------- */
    
    #access li.current-menu-item.menu-item-246 > a, #access li.current-menu-ancestor.menu-item-246 > a, #access li.current_page_item.menu-item-246 > a, #access li.current_page_ancestor.menu-item-246 > a
    { background-image:url('http://www.rosemaryahern.com/wp-content/themes/twentyelevenchild/images/Menu_Master-19.jpg'); background-position:0px -40px;
    }
    #menu-item-260 a {
    display:block; height:20px; width:65px; padding:0px; outline:none; text-indent:-9999px;
    background-image:url('http://www.rosemaryahern.com/wp-content/themes/twentyelevenchild/images/Menu_Master-19.jpg'); background-position:-65px 0px;
    }
    /* Hover */
    #access li.menu-item-260.menu-item-object-page:hover > a, #access ul ul:hover > a, #access li.menu-item-246.menu-item-object-page a:focus {
    display:block; height:20px; width:65px; padding:0px; outline:none; text-indent:-9999px;
    background-image:url('http://www.rosemaryahern.com/wp-content/themes/twentyelevenchild/images/Menu_Master-19.jpg'); background-position:-65px -20px;
    }
    /* =Menu - maintain ACTIVE STATE when it is the current page/sub-menu
    -------------------- */
    
    #access li.current-menu-item.menu-item-260 > a, #access li.current-menu-ancestor.menu-item-260 > a, #access li.current_page_item.menu-item-260 > a, #access li.current_page_ancestor.menu-item-260 > a
    { background-image:url('http://www.rosemaryahern.com/wp-content/themes/twentyelevenchild/images/Menu_Master-19.jpg'); background-position:-65px -40px;
    }
  19. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Unless your site is readily accessible, it is almost impossible to be of much help with things like this.

    Not sure what all you've done, but generally, you cannot just copy CSS code from someplace else (i.e. the external generator) into your existing menu CSS because the CSS selectors won't be the same. Did you modify the CSS and/or HTML accordingly?

  20. lizannehart
    Member
    Posted 1 year ago #

    I understand. I've deactivated Maintenance Mode temporarily. For now, I'm using the code suggested by the forum user, customized with my sprite size increments and menu IDs (which I got from the page source code).

    http://www.rosemaryahern.com

    Thanks so much!

  21. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Are you using Firebug to work on this?

    Firebug shows that a cache css file is over-riding at least some of your child theme styles.

  22. lizannehart
    Member
    Posted 1 year ago #

    I just downloaded Firebug and am learning to use it. Where do you see that note and how do I fix it?

  23. lizannehart
    Member
    Posted 1 year ago #

    Upon inspection, it seems to be related to a plugin that I installed called "Styles." I deactivated it. Issues:

    1. Now I see BOTH the original text menu and the sprite (only the Home page portion is programmed). How do I get rid of the text menu?

    2. How do I get rid of the black box?

    3. Why is there a thin line separating header and menu and how to delete? I thought I changed this in header options, but it has popped up again with all the menu work I've been doing.

    Thanks.

  24. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    When you look at the menu using Firefox -- you can see in the right-hand Firebug panel -- the styles assigned to the element -- and where those styles are coming from.

    I don't know where cache.css is coming from -- looks like you got rid of whatever was creating it?

  25. Niki Campbell
    Member
    Posted 1 year ago #

    You have to add text-indent: -9999px;

  26. lizannehart
    Member
    Posted 1 year ago #

    Yes, I deactivated the Styles plugin.

    I am poking around in Firebug (and, while I learn this great tool, I am working against a deadline). Can anyone tell me specifically in which lines to find/fix the following errors?

    1. I see BOTH the original text menu and the sprite. I'd like to get rid of/turn off the text menu.

    2. I need to lose the black box?

    3. I want to delete the thin line separating header and menu.

    P.S. Nicki: Will do!

  27. lizannehart
    Member
    Posted 1 year ago #

    How cool! I see that adding the text-indent:-9999px; bit got rid of the text menu. I'm now down to two questions:

    2. How do I lose the black box?

    3. I want to delete the thin line separating header and menu.

Topic Closed

This topic has been closed to new replies.

About this Topic