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.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.