Menu Customization Questions

anilpochiraju

Hello Support,

First off thanks for patiently answering all the questions posed so far and thanks in advance for supporting more questions :-).

I have a few questions with regards to customizing the Header Menu: (I am using the Classic Menu Style)

1. How do you change the color of the blue line that appears when you hover over a menu item. 

2. How do you get the blue line to stick to the menu item that has been clicked.

3. How do you change the position of the blue line from to of the header bar to the bottom of the header bar.

4. How do you ensure that while the blue line sticks to the menu item that has been clicked, a new blue line appears when hovering over other menu items.

5. How do you do all of the above for the sticky menu as well.

Regards,

Anil

Albert

Hi,

please provide url to your website where you want to do this so we can avoid confuse and do it the best as we can for you

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

anilpochiraju

Sure: http://104.236.152.229/

The site is still in development. 

I just noticed one issue which relates to question 4: On my page the blue line sticks to the menu items clicked except for the "ABOUT" item.

Please add one more item to the list of questions since you are going to look at the site:

6. How do I lower the submenu display (submenu that appears when hovering over the main menu item) to just below the Header. As you can see on the site it is currently overlapping with the Header.

Thanks.

Albert

Ok. So below we'll give you solutions in points:

1. To change this bar color, please use below css:

#Top_bar .menu > li a:after { background: #000; }

2. As we see you also got this line for menu item when is active so we don't understand what exactly you ask for.

3,4,5. For that please send a screenshot of what you mean because we are not sure. We have no idea what exactly you ask for because as we see, all those lines are fine for regular and sticky menu.

6. We did not noticed anything like that on our side so screenshot is necessary too.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

anilpochiraju

Hello,

Thanks for your prompt response.

Here are the screen-shots to explain my issues.

For 2 

As you can see in below screenshot the blue line nor the "active" menu item shows up for ABOUT page though the page is the one that is being displayed. 

http://grab.by/F89E

In this screenshot below you will find that the hover and blue line is working properly.

http://grab.by/F89Y

For 3 

As you can see in below screenshot the blue line is on the top for Classic Header. I would like to change this to bottom.

http://grab.by/F89Y

As you can see in below screenshot the blue line is on the bottom for Sticky Header. I would like to change this to top.

http://grab.by/F8as

For 6

As you can see in the below screenshot the submenu overlaps with the Header (by a couple of px maybe). I want to ensure that the submenu is below the header and not overlapping.

http://grab.by/F89i

For 4 and 5

As you have probably noticed, this is not an issue except for the ABOUT menu item. Fixing 2 will fix resolve this question.

Thanks,

Anil

Albert

FOR 2:

Ok, we see what happen. Only this page is one page and this is the reason why is not activate. We'll try to sort this while future updates but at this moment we are not sure if this can be done.

FOR 3:

This can be done within below css:

#Top_bar .menu > li > a:after { top: 86px; }
#Top_bar.is-sticky .menu > li > a:after { bottom: 56px; }

FOR 6:

This happen because of your custom css. So or you will check which of your css is the problem or you will use below css instead:

#Top_bar .menu > li > a { padding: 18px 0; }

P.S. Next time if you want to modify css's we recommend to acquaint with http://themes.muffingroup.com/betheme/documentation/#theme-customizations

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

anilpochiraju

Thanks for the help. 

I did use firebug to try and find the right css to modify before posting. It was only after repeated unsuccessful attempts that I posted here. As you can see there are quite a few customizations on the site which I was able to do with the help of firebug, but have run into issues with a few items.

Hope your comment does not mean future questions are dissuaded.

Cheers,

Anil

Albert

Of course this is not what we meant But if you will use this tool yourself you can get answer on own questions much faster because you don't need to wait for us.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

anilpochiraju

No problem. All good