Menu Navigation Issues

  • Unknown's avatar
    superiordiocese · Member ·

    I really seemed to mess up my top navigation structure. Can someone help me get the drop down menu on the upper right hand of the page looking nice. Keep the white background, but get rid of the ugly green focus box which appears when cursor is on top of link. There are also some other issues, but lets work on this first, please.

    My site is: http://catholicdosnews.org/

    The reason I tweaked the design the way I did because it appears in an iframe on another site I am currently developing. See http://5291.joseph.ecatholicwebsites.com/ where everything appears to be working okay.

    I would be grateful for any help I receive. Thanks.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    You can make the hover color for main menu items in the Twenty Fourteen theme inherit the background color of their parent element (white in this case) by adding the following to the bottom of your Appearance > Customize > CSS editor:

    .primary-navigation ul ul a:hover,
.primary-navigation ul ul li.focus > a {
	background-color: inherit;
}
  • Unknown's avatar
    superiordiocese · Member ·

    Thank you so much, designsimply.

    Here is a related issue… I think. click on anyone of the links in the drop down navigation menu you will notice that the top link disappears (i guess turns white) and the link which is clicked turns green and other links disappear (turn white).

    Can you fix this too, please? I have spent many hours doing tweaks (and I really am no expert at this)…so I need help. Thanks.

  • Unknown's avatar
    designsimply · Member ·

    It looks like you were changing the background of some of the elements and not the text color. Because you’ve added so much custom CSS, it’s a little hard to follow. :) Try adding this:

    .primary-navigation li:hover > a,
.primary-navigation li.focus > a {
	color: #0f73b4;
}
  • Unknown's avatar
    superiordiocese · Member ·

    nope. that did not work. I even tried taking out some of my code, but did not work.

  • Unknown's avatar
    designsimply · Member ·

    Well I was looking at hovering and not clicking. My mistake.

    It helps a ton to look at specifics. Here’s what I’m looking at now: when I go to http://catholicdosnews.org/ I hover over “Superior Diocese News Categories” at the top right and then I click on “Catholic Schools.” The CSS I posted previously fixed problems with the text color inside that menu on hover, but now I see what you mean if I actually click to get to open the “Catholic Schools” category page. The “Superior Diocese News Categories” text turns green and the “Catholic Schools” turns white. This is a side effect of all the other CSS changes you’ve made! It’s possible you’ll keep running into scenarios like this, and you should just be able to fix them as you find them.

    Try adding the following to make the link color blue instead of green for current page items and blue instead of white for current page submenu items too:

    .site-navigation .current_page_item > a,
.site-navigation .current_page_ancestor > a,
.site-navigation .current-menu-item > a,
.site-navigation .current-menu-ancestor > a {
	color: #0f73b4;
}

.site-navigation li .current_page_item > a,
.site-navigation li .current_page_ancestor > a,
.site-navigation li .current-menu-item > a,
.site-navigation li .current-menu-ancestor > a {
	color: #0f73b4;
}
  • Unknown's avatar
    superiordiocese · Member ·

    awesome, that did the trick. Thank you so much. One last request for now…if that is okay? On the iphone version (which I also have as an iframe on http://5291.joseph.ecatholicwebsites.com/), I was able to reduce the padding? margins? (the space between lines) of the dropdown menu. I would like to do the same for this larger version. Can you help me with that? If you give me the code I can tweak it according to my preferences.

  • Unknown's avatar
    designsimply · Member ·

    You might consider making an adjustment like that with a media query.

    Here is an example:

    @media screen and (max-width: 780px) {
	.primary-navigation ul ul a {
		padding-top: .5em;
	}
}

    Adjust the .5em value as needed.

    Be careful about how much spacing you add. On mobile, the space should be big enough for a finger to tap easily, but you should also be careful about putting too long of a list in place that makes it so users have to scroll a bunch in order to see all the items.

    Here is more information about how media queries work in case you’re interested: http://en.support.wordpress.com/custom-design/custom-css-media-queries/

  • Unknown's avatar
    superiordiocese · Member ·

    I think you may have misunderstood me. I okay with the spacing on the smaller screens. It is the larger screen, the standard desktop, which I believe the spacing is too large and want to make it smaller. The code you gave me doesn’t seem to work on that.

  • Unknown's avatar
    designsimply · Member ·

    Sorry about that. You’re right, I think I read it backwards!

    Let’s look at the example I gave before again though:

    @media screen and (max-width: 780px) {
	.primary-navigation ul ul a {
		padding-top: .5em;
	}
}

    See how it has max-width as one of the limitations? To flip that so you apply the rule to large screens instead of small, just change max-width to min-width.

    There is also bottom padding on those dropdown menu links, so you could add another rule just below “padding-top” that ways “padding-bottom” if you’d like.

  • Unknown's avatar
    superiordiocese · Member ·

    perfect. I would never have guessed that the solution as so simple. Max and min widths! I have been trying to figure that out for some time. Thanks for all your help today. You addressed all my issues…so i consider this case closed. :)

  • The topic ‘Menu Navigation Issues’ is closed to new replies.