Need help? Check out our Support site, then


enterprise theme nav bar: pages, categories and their drop down design

  1. The following questions directly relate to the design of my pages/categories nav bar.

    1. How do I make it so the link to the page "My Pinterest Page" is aligned with the other page titles "Home" and "Graphic design." Note that the "My Pinterest Page" is directly linked to my pinterest.

    2. I want the vertical lines that separate each page title to connect to the bottom border of the page nav bar. Note that I don't want a gap between the text of the page titles and the border.

    3. When you hover over the categories, I want the hover block color to be the same greenish color (5EB094) and NOT gray like it currently is.

    4. When you hover over one of the items in the category drop down menu like SweetTooth>Sinfully Tasty I want a block background color a slightly darker version of the green. Just like the format of category drop downs on this blog.

    5. Also..the category "Baked Goodies" is has a background block of gray..what the heck? Should be same as others.

    The blog I need help with is gingergram.com.

  2. There appears to be something wrong with the My Pinterest menu item, possibly in the URL you entered, or perhaps in the label. The label should only say "My Pinterest Page" with no URL or anything. The URL goes in the address/link location, and make sure there isn't anything wrong with the URL, such as doubling it.

  3. 1. How do I make it so the link to the page "My Pinterest Page" is aligned with the other page titles "Home" and "Graphic design." Note that the "My Pinterest Page" is directly linked to my pinterest.

    thesacredpath is correct, remove the HTML you added to your "My Pinterest Page" and that should solve the problem.

  4. 2. I want the vertical lines that separate each page title to connect to the bottom border of the page nav bar. Note that I don't want a gap between the text of the page titles and the border.

    If I understand your question correctly, that should happen by default. See the demo site for the Enterprise theme as an example: http://enterprisedemo.wordpress.com/

  5. 3. When you hover over the categories, I want the hover block color to be the same greenish color (5EB094) and NOT gray like it currently is.

    This will turn the hover color for the category menu links in the Enterprise theme green:

    .subnav ul li a:hover {
    	background: #5eb094;
    }
  6. I intentionally added the HTML to "My Pinterest Page" so that when you click it, it takes you directly to my Pinterest account. As far as I know, adding HTML to the page title is the only way to make a wordpress page link directly to a different website...?

    Thanks for the answer to question 3, designsimply! Do you know how to fix the issues addressed in questions 4 & 5?

  7. To make a menu item link to an external site, such as pinterest, you create a custom link in the custom menu: http://en.support.wordpress.com/menus/#adding-custom-links .

    Don't add the HTML to the page title or to the label for the menu. That in general will cause most theme navigation to blow up.

  8. Thanks sacredpath!

    When you hover over a category like "Sweet Tooth" the drop down links are the same green as the subnav menu (5eb094). When you hover over one of those drop downs like "Sinfully Tasty" I want the hover color to be this color 11CAA4.

    This is all the code I currently have for my subnav:
    .subnav ul li a:hover {
    background: #11CAA4;
    }

    #subnav {
    background: #5eb094
    }

    #subnav li li a, #subnav li li a:visited {
    background-color: #5eb094;
    }

  9. Try changing this:

    .subnav ul li a:hover {
    	background: #11CAA4
    }

    To this:

    .subnav ul li a:hover,
    #subnav li li a:hover {
    	background: #11CAA4
    }
  10. It worked! Thank you!

    Is there a way to fix the problem where when you hover over one of the drop downs like "sinfully tasty" the background of the above main category title like "sweet tooth" turns gray? I want it to be the green 5eb094.

    And the problem where the background of "Home" is gray instead of the salmon color F08080.

    This is all the CSS I have for the Nav bar:

    #nav {
    border: 2px solid #ffffff;
    }

    #nav {
    background: #F08080;
    }

    #nav ul li a:hover {
    background: #F4A5B2;
    }

  11. About the previous question where i said "it worked!" ... I discovered it only works when I'm in the CSS editing mode. Yes, I clicked save and triple checked. :(

  12. About the previous question where i said "it worked!" ... I discovered it only works when I'm in the CSS editing mode. Yes, I clicked save and triple checked. :(

    It sounds like *maybe* interference from other Custom CSS or possibly the CSS editor isn't saving changes at all sometimes. <--- If that is happening, definitely let me know and I will look into it. It is working for me right now though.

  13. Is there a way to fix the problem where when you hover over one of the drop downs like "sinfully tasty" the background of the above main category title like "sweet tooth" turns gray?

    And the problem where the background of "Home" is gray instead of the salmon color F08080.

    I think you're going to keep running into random issues like this unless we step back and look at all of the colors that the Enterprise theme uses for menu colors. To do that, I used my web browser inspector to find the CSS link in the header that contains the theme's CSS, then I copied out anything in the menu and submenu sections, then I swapped out all the colors. This should cover everything, including tertiary menus should you add another level in the future. It also covers the parent menu item color when you hover over submenu items underneath it as well as the current page menu item color ("Home" in your example above):

    #nav {
    	border: 2px solid #fff;
    	background: #f08080;
    }
    
    #subnav {
    	border: 2px solid #fff;
    }
    
    .nav ul li a {
    	color: #eee;
    	background: #f08080;
    }
    
    .nav ul li a:hover,
    .nav ul li a.selected,
    .nav ul li.current-menu-item > a,
    .nav ul li.current-menu-ancestor > a,
    .nav ul li.current_page_item > a,
    .nav ul li.current_page_ancestor > a {
    	background: #f4a5b2;
    	color: #eee;
    }
    
    .nav ul li ul li a {
    	background: #f08080;
    	color: #fff;
    }
    
    .nav ul li ul li a:hover {
    	background: #f4a5b2;
    	color: #fff;
    }
    
    .nav li:hover > a {
    	background: f4a5b2;
    }
    
    .nav ul ul :hover > a {
    	background: #f4a5b2;
    }
    
    #subnav {
    	background: #5eb094;
    }
    
    .subnav ul li a {
    	background: transparent;
    	color: #fff;
    }
    
    .subnav ul li a:hover,
    .subnav ul li a.selected,
    .subnav ul li.current-cat a,
    .subnav ul li.current-menu-item > a,
    .subnav ul li.current-menu-ancestor > a,
    .subnav ul li.current_page_item > a,
    .subnav ul li.current_page_ancestor > a {
    	background: #11caa4;
    	color: #fff;
    }
    
    .subnav ul li ul li a {
    	background: #5eb094;
    	color: #fff;
    }
    
    .subnav ul li ul li a:hover {
    	background: #11caa4;
    }
    
    .subnav li:hover > a {
    	background: #5eb094;
    }
    
    .subnav ul ul :hover > a {
    	background: #5eb094;
    }

    You should remove all of your previous menu color rules, and add the example above in their place.

  14. For the record, this is the rule (included in the example above, just noting it here for reference) that affects the parent menu item when you hover over it's submenu items:

    .subnav li:hover > a {
    	background: #5eb094;
    }
  15. Wow, thank you so much!!! It's almost exactly how I envision it. Just a few things...
    1. Can we make "Home" the salmon color and use light pink as the hover
    2. I would like the menu fonts to be larger.
    3. On my posts I will always want the word "Ingredients" to be BELOW the photo. No matter how many "ul" I add, the text stays aligned with the photo. Here is an example.

  16. Disregard number 1! I see that it was highlighted because that was the page I was currently on.

  17. 2. I would like the menu fonts to be larger.

    You need to use "!important" to override the custom font settings:

    .nav ul li a {
    	font-size: 15px !important;
    }
  18. 3. On my posts I will always want the word "Ingredients" to be BELOW the photo. No matter how many "ul" I add, the text stays aligned with the photo. Here is an example.

    The Enterprise already has styling for a "clear" class setup:

    .clear {
    	clear: both;
    	}

    And you can use that to your advantage. In cases where you want to clear anything from both the left and right side of an element, like a "ul", edit the post add the "clear" class to the HTML.
    http://en.support.wordpress.com/editors/#text-editor

    Change this:

    <ul>

    To this:

    <ul class="clear">

  19. Thank you, you are a wiz!

    Okay, on the Home page I want the food photos to be next to each other but they are stacking on top for some reason. They currently all have the alignment "none" selected.

    Also, in Settings > Reading, I have "Summary" selected under "For each article in a feed, show..."
    But regardless of selecting that, it still showed the FULL text. After searching wp forums, I found that if I added the "Insert More Tag" where I wanted it to cut off, that would do the trick. So I did, but I don't like that now when you click "Read more of this post," the page automatically scrolls down to where it was cut off. Any suggestions?

  20. For the Home page, it actually would be ideal to have it be a feed of my most recent posts only if it is possible to have some text that is sticky above the feed.

  21. Okay, on the Home page I want the food photos to be next to each other but they are stacking on top for some reason. They currently all have the alignment "none" selected.

    That's the expected behavior for alignment=none. You probably want align=left. See if this page helps:
    http://en.support.wordpress.com/images/image-alignment/

    If you aligned images left and then the text below it started wrapping funny, you could edit the HTML in your post and add clear=both to the paragraph just after the images, like this:

    <p style="clear: both;">text here</p>

  22. Also, in Settings > Reading, I have "Summary" selected under "For each article in a feed, show..."
    But regardless of selecting that, it still showed the FULL text.

    Note the setting label (on the left side) says, "For each article in a feed, show." That means the summary setting only applies to feeds.

    There actually isn't a setting to turn all posts into summaries, though some themes do that automatically, it's currently a theme design choice. You also have the option to display just the first part of the post by using a more tag:
    http://en.support.wordpress.com/more-tag/

  23. I don't like that now when you click "Read more of this post," the page automatically scrolls down to where it was cut off. Any suggestions?

    That's a function of how the underlying HTML is setup for "Read more" links in general on WordPress. You cannot change functionality like that using the Custom Design upgrade which is for appearance-related changes. WordPress.com doesn't offer a way for you to change that particular behavior through a setting, it's just how "read more" links are setup to work. Sorry I don't have a better solution for you on this one!

  24. For the Home page, it actually would be ideal to have it be a feed of my most recent posts only if it is possible to have some text that is sticky above the feed.

    Do you mean the Recent Posts in the sidebar? If so, you can just add a separate text widget above it.

  25. Thank you again! For the homepage I figured out what I wanted...to display my latest posts but I have created a "sticky post" for it.

    Now I'm wondering why certain HTML isn't saving. I want to add checkboxes next to each ingredient like AllRecipes does. I tried this code <input type="checkbox"> But it doesn't work.

  26. In the future, for new, separate questions, could you create a new help request instead of adding them to the end of long threads? It helps keep things organized. :)

  27. Now I'm wondering why certain HTML isn't saving. I want to add checkboxes next to each ingredient like AllRecipes does. I tried this code <input type="checkbox"> But it doesn't work.

    WordPress.com has traditionally not allowed adding custom form code, and "input" is one of those. It's also mentioned on this related help page if you'd like to read more:
    http://en.support.wordpress.com/code/

    Would it work for you to use an image instead? You can use the :before pseudo element to add a small image to the left of list elements, and that might work out well for what you're trying to do.

Topic Closed

This topic has been closed to new replies.

About this Topic