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

  • Author
    Posts
  • #1218663

    0emma
    Member

    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.

    #1218829

    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.

    #1218968

    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.

    #1218969

    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/

    #1218970

    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;
    }
    #1218971

    0emma
    Member

    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?

    #1218972

    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.

    #1218973

    0emma
    Member

    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;
    }

    #1218974

    Try changing this:

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

    To this:

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

    0emma
    Member

    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;
    }

    #1218976

    0emma
    Member

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

    #1218979

    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.

    #1218980

    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.

    #1218981

    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;
    }
    #1218982

    0emma
    Member

    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.

    #1218983

    0emma
    Member

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

    #1218986

    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;
    }
    #1218987

    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">

    #1218988

    0emma
    Member

    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?

    #1218989

    0emma
    Member

    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.

The topic ‘enterprise theme nav bar: pages, categories and their drop down design’ is closed to new replies.