Creative Header

Gallardooo · December 2015

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!

Albert · December 2015

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

Gallardooo · December 2015

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!

Albert · December 2015

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.

Gallardooo · December 2015

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!

Albert · December 2015

Your css is wrong. Like we wrote above, instead of xxx supposed to be MENU ITEM ID, not class name.

Gallardooo · December 2015

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

Albert · December 2015

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

Gallardooo · December 2015

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?

Albert · December 2015

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

Creative Header

Comments