Menu Adjustments

(13 posts) (3 voices)

1. 

   ydaria83
   Member

   Hi,
   I am having problem with styling the menu items.
   Please see my attached screenshot. The red area containing the main navigation menu items. The green area is the gap between the main menu items and where the sub menu begins. And the pink area is the sub menu items.
   Questions:

   • 1. How can I change the main menu items' (red area) color? I want to use the #544F42 color for both the main menu and sub menu text color.
   • 2. I also wanna be able to make the red area main menu elements text color to change when it is on a: hover and a: visited stages to #CBB9A2 with an underline.
   • 3. How can I address the gap on the green area?? I am not using background images for the main menu so drop down sub menu elements are far too down from each other.
   • 4. Also how can I turn off hover image on current page sub items?

   When I tried to do these changes I can't get it working I assume there are other styles are overwriting this? I really would like to change the navigation area styles without effecting any other area.

   Your help is greatly appreciated!

   Thanks,

   

   Attachments

   1. menu.jpg (24.8 KB, 2 downloads) 1 year old

   Posted 1 year ago #
2. 

   ydaria83
   Member

   Sorry.. I put this post under wrong template support. It is supposed to be under :Awake"

   Posted 1 year ago #
3. 

   Elliott
   Support

   Hello ydaria83,

   Try adding this line in your style.css file,

   .menu-item a { color: red !important; }

   This will make both the top level and sub levels the color that you choose. Due to the customization of your site it is too hard to tell how to control the padding so when you go live send us a link and we will take a closer look.

   Posted 1 year ago #
4. 

   ydaria83
   Member

   Hi Elliott,

   Can I send you a PM with my login info so you can take a look at it please? Let me know :)

   Thanks!

   Posted 1 year ago #
5. 

   Elliott
   Support

   Yes that is fine.

   Posted 1 year ago #
6. 

   ydaria83
   Member

   Ok I sent you a PM about an hour ago. Thanks ;)

   Posted 1 year ago #
7. 

   Elliott
   Support

   Alrighty it looks like you just took the background off so try adding this line in your style.css file,

   .children { top: 40px !important; }

   Let us know if that works for you ydaria83.

   Posted 1 year ago #
8. 

   ydaria83
   Member

   Hi Elliott,
   Thank you for your quick response. It worked perfect. But I am also trying to to replace the gray background on the sub menu element. I managed to get rid of their hover stage.(it was just a color) but the background which holds the sub menu items I believe it is a gradient image? Can you help me how I can change or delete this?

   Also is there a way I can center the main_navigation area ?

   Thanks!

   Posted 1 year ago #
9. 

   Elliott
   Support

   For the sub menu background open up /wp-content/themes/awake/style.css and on line 1468 you should see this,

   background-color:#f5f5f5;
   background: -moz-linear-gradient(top,  rgba(255, 255, 255, 1), rgba(229, 229, 229, 1));
   background:-webkit-gradient(linear,left top,left bottom, color-stop(0, #fff),color-stop(1, #e5e5e5))}

   You should be able to change the colors there. The navigation is positioned absolutely so you will have to play around with the values until it looks nice, try adding this in your style.css file,

   #main_navigation { left: 200px !important; }

   Since you are customizing the site quite a bit then it would be best to hire a freelancer to get these little details taken care of for you ydaria83.

   Posted 1 year ago #
10. 

    ydaria83
    Member

    Elliott,
    You are awesome!!! I can't express how thankful I am. You are the best!

    Sorry, I f I asked too many questions :) This template is what I could ask for, really appreciate it.

    Posted 1 year ago #
11. 

    Elliott
    Support

    Your welcome ydaria83, if you have any other support questions then let us know.

    Posted 1 year ago #
12. 

    palmrisk
    Member

    Wanted to add the button_sprite effect for the second line of the main nav. Currently, it's just transparent. I have uploaded a screen shot. I was trying to change the color in the CSS style sheet, however I want to keep the gradient effect. Do I need to edit the main nav code or just apply to style.css?

    <div id="main_navigation" class="jqueryslidemenu unitPng">
    <ul id="menu-main" class="">
    <li id="menu-item-144" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-144">

    Attachments

    1. nav_example.jpg (42.1 KB, 6 downloads) 8 months old

    Posted 8 months ago #
13. 

    Elliott
    Support

    Hello palmrisk,

    From your image it appears that your menu is too long and running into the next line. If possible then send us a link to your site so we can get a better idea of what's going on.

    You are wanting to change the color for just the menu items running onto the second line?

    Posted 8 months ago #

RSS feed for this topic

Reply

You must log in to post.