Navigation Items and Home Button

Support Area Forums Grassroots Navigation Items and Home Button

Viewing 6 posts - 1 through 6 (of 6 total)
URL to the page in question: http://www.tripleelleevents.com
  • Author
    Posts
  • #33033
    David Savage
    Participant

    Hello Bill,

    I have a couple questions regarding Navigation Items and editing the Home Button.

    1. Navigation Items: is it possible to adjust the width of the container box of a sub item dropdown? Hovering over “Services”, can the two sub-items relating to the first dropdown item appear on 1 line versus the 3 or 4? Also, how can I adjust the button in the Header to have rounded edges similar to the Home Button?

    2. I would like to edit the Button Background Color Hover on the home page. When updating the home page, it does not seem to respond to the color I have chosen. I would like it to be #7bc6c5.

    Thanks very much Bill,
    David

    #33038
    Bill Robbins
    Moderator

    Good Morning David,

    My apologies for not getting you an answer yesterday evening. Let’s see if we can find answers for you:

    Navigation Width

    You can change the width of the drop-down items. Here’s how to do that:

    1. Go to your theme options page and choose the Advanced tab.
    2. Scroll down to the Custom CSS box and add this:
      
      nav#top-menu ul li:hover ul {
      	width: 240px;
      }
      
      nav#top-menu ul li:hover ul ul {
      	top: -5px;
      }
      
    3. Update your settings.

    See if that looks like a good width to you. You can make it more narrow or wider by changing the 240px in the snippet above.

    You can round the corners of the navigation button by adding this to the Custom CSS too:

    
    nav#top-menu ul li.button a,
    .scroll nav#top-menu ul li.button a{
    	border-radius: 10px;
    }
    

    Feel free to adjust the 10px so you have the amount of rounding you’re looking for.


    Hero Button Background

    I do see that the button is not changing color like we need it to. Let’s force it this way:

    1. Go to your theme options page and choose the Advanced tab.
    2. Scroll down to the Custom CSS box and add this:
      
      .home .hero-copy a.button {
      	background-color: #7bc6c5;
      }
      
    3. Update your settings.

    I am working on an update to Grassroots, and I’ll include a fix for the per page button background color in that next update.

    Let me know if you have any questions or trouble.

    Thanks,
    Bill

    #33041
    David Savage
    Participant

    Good morning Bill,

    Thanks very much for your reply. Pardon me also for addressing two topics in on thread.

    The CSS changes above have worked well. Thank you. I just have one more quick question. On the Services drop-down, can I make it so the two sub-items to Wedding Planning (Plan just a little & Plan a little bit more) only appear as you hover over Wedding Planning?

    Thanks again,
    David

    #33042
    Bill Robbins
    Moderator

    Hi David,

    I believe we can do that too. Add this to your Custom CSS also:

    
    nav#top-menu ul li:hover ul ul {
    	display:none;
    }
    
    nav#top-menu ul ul li:hover ul {
    	display: block;
    }
    

    See if that doesn’t take care of the second level drop-downs for you. Let me know if it gives you any trouble.

    Have a great day,
    Bill

    #33044
    David Savage
    Participant

    Hi Bill,

    That worked great. Thanks again for all your help!

    David

    #33045
    Bill Robbins
    Moderator

    Happy to help out David 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Navigation Items and Home Button’ is closed to new replies.