Creative Header

edited December 2015 in Theme support
Hi, I would like to make my header look like the one shown on this demo http://themes.muffingroup.com/be/library/

So I was wondering if you could help me achieve the following: 

1) Make the highlight hover effect look the same by preventing it from touching the edges of the header http://imgur.com/4zZtoD0 (area in red)

2) Make the custom link on the nav menu that says "Hablamos Espanol" appear always as activated, like the one that says "Buy Now" on the demo http://imgur.com/4zZtoD0 (area in green)

3) Use an image as the header's background

My URL: http://www.exploraseattle.com/ (using new theme copy: 976f2bca-5645-47c7-b66d-52ef990ff516)

Thank you!

Comments

  • Hi,

    1) To do the same effect as on Be|Library demo, please set highlight effect for menu items under Theme options > Menu & Action Bar > Menu section and also, please use extra css:
    body:not(.header-simple) #Top_bar #menu { margin: 0 20px !important; }
    2) Do you mean to set fixed background color for this item?

    3) You can set background image for this header type with below css:
    #Header_creative { background-image: url('#') !important; }
  • Thank you for your response!

    2) I would like the custom link's text to have a different color from the rest of the page links, like the "Buy Now" text on the demo  http://imgur.com/4zZtoD0 (highlighted in green)

    Thank you!
  • 2) OK. So to set background color for individual items, you supposed to use below css:
    #Top_bar .menu > li#menu-item-xxx { background: #000 !important; }
    where xxx is menu item ID.
  • Hi, tahnks for your response. Unfortunately that CSS snippet did not work. I created a CSS class named hablamosespanol for that nav link and then placed it on the snippet but it did not change the text color of the nav link called "Hablamos Espanol" on my site. This is how I entered the snippet:

    #Top_bar .menu > li#menu-item-hablamosespanol { 
    background: #E6007E !important;
    }

    Please let me know if I'm doing something wrong and how I can accomplish to change the text color for that custom link only. 

    Thank you!

  • Your css is wrong. Like we wrote above, instead of xxx supposed to be MENU ITEM ID, not class name.
  • I thought so :) 

    What is the menu item ID then? Where do I obtain it from? Is it the name of the link, example, "Hablamos Espanol"?
  • You can get menu item ID with tools like Firebug for Firefox. More details about such tools you can read on http://themes.muffingroup.com/betheme/documentation/#theme-customizations
  • Ok I was finally able to target that nav link with this CSS snippet:

    #Top_bar .menu > li#menu-item-30 {
    background: #fff !important;
    }

    However, I was still unable to make the text color different from the rest of the nav links like the "Buy Now" link on the demo. How can I accomplish this? 

    Also, is there any way to change the text color and background for that link when you hover over?
  • 1) Menu item color can be changed with below css:
    #Top_bar .menu > li#menu-item-xxx > a { color: #000 !important; }
    where xxx is menu item ID.

    2) Background and font colors on hover, you can change with the following css:
    #Top_bar .menu > li > a:hover { color: #000 !important; background: #E2E2E2 !important; }
Sign In or Register to comment.