Make Header Opaque (but keep active menu indicator) - Support

Viewing 21 posts - 1 through 21 (of 21 total)

Author

Posts
May 4, 2018 at 8:35 am #951437

FionaH
Participant

Hi,
I want my header not transparent. But the only alternative in “Header Style” is minimal, which then loses the active menu indicator.
Can you help with code to either
– add back the active menu indicator if I choose “Minimal with Drop Shadow”; or
– make the header opaque, if I choose “Default (with borders, active menu indicator and slightly transparent)”
Thank you,

May 5, 2018 at 11:43 am #952088
Mike
Moderator
Hey Fiona,
The following code for your General Styling > Quick CSS field, adds the active menu indicator to “Minimal with Drop Shadow”
Please adjust the colors to suit.
```
.av_minimal_header .av-main-nav li:hover .avia-menu-fx,.av_minimal_header .current-menu-item > a > .avia-menu-fx,.av_minimal_header .av-main-nav li:hover .current_page_item > a > .avia-menu-fx {
    opacity: 1 !important; 
    visibility: visible !important; 
    background-color: #9cc2df !important; 
    color: #ffffff;
    border-color: #7aa0bd !important; 
    display: block !important;
}
```
If you are still having trouble please include a admin login in the private content area so we can take a closer look.

Best regards,
Mike
May 5, 2018 at 8:42 pm #952165

otavioef
Participant

That also helped me. I was looking for this solution.
When I put a link at the main menu (instead of a page), the active menu indicator was shown for the pages but not for the link.
Now it worked with this code.
Thank you so much!

May 7, 2018 at 2:40 am #952433

Mike
Moderator

Hi,

@otavioef Glad we could help, Thank you for using Enfold.
@FionaH did this also work for you?

Best regards,
Mike

May 8, 2018 at 6:11 am #953111

FionaH
Participant

Hi Mike,
No, it did not work for me in the “General Styling > Quick CSS field”
I then tried the “Custom CSS” field under Appearance/Customise of WordPress and that appears to have worked.
regards
Fiona

May 8, 2018 at 10:42 am #953293

Mike
Moderator

Hi,
That’s good to hear, shall we close this then?

Best regards,
Mike

May 9, 2018 at 4:24 am #953657

FionaH
Participant

Hi Mike,
Yes, how do we ‘close’ this?
(Or can I ask one last thing… some ‘active menu indicator’s have a little ‘triangle’ in the centre like a pointer… is that easy to do? I like those.
Cheerio, F

May 9, 2018 at 4:46 am #953665

Mike
Moderator

Hi,
Please see this post I think it is what you are looking for.

Best regards,
Mike

May 9, 2018 at 5:28 am #953671

FionaH
Participant

Checked out the post you suggest which said to put this code in the CSS.
.menu li > a:after { content: ‘ ▾’; }
.menu li > a:only-child:after { content: ”; }

I tried BOTH places (Enfold General Styling) and Appearance/Customize/CSS but neither place made any change to the active indicator.
Is this perhaps because we have already added code to make it appear? And this code needs to be nested with the appearance code?

May 9, 2018 at 11:52 am #953837

Yigit
Keymaster

Hi,

Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.
If that too does not help, please create temporary admin logins and post them here privately so we can look into it.

Best regards,
Yigit

May 10, 2018 at 4:04 am #954262

FionaH
Participant

Hi,
I’ve checked the code – no ‘conversion’ happening, but it is not showing.
Admin login created and posted in Private.
thanks,
Fiona

May 10, 2018 at 4:07 am #954263

FionaH
Participant

domain

May 10, 2018 at 4:22 am #954267
Mike
Moderator
Hi,
I see your code is a little off, try this instead:
```
.menu li > a:after { content: ' ▾'; }
.menu li > a:only-child:after { content: ''; }
```
or this:
```
.menu li > a:after { content: ' ▾'!important;  }
.menu li > a:only-child:after { content: ''!important;  }
```
Best regards,
Mike
May 10, 2018 at 6:52 am #954378

FionaH
Participant

Thanks, I cut & pasted that code directly from the post linked.
I’ve now tried your revised code, but that code has not worked either.

May 10, 2018 at 11:28 am #954464

Mike
Moderator

Hi,
I see the arrow next to the “we install” menu item, which is your only menu that has a drop down.

Please try clearing your browser cache.

Best regards,
Mike

May 11, 2018 at 3:32 am #954970

FionaH
Participant

Ah, is that what the code is for…thats nice too, but not what I was asking for.
The code I’m am looking for puts a little triangle on the blue bar menu indicator which in your image is under “Home”.
So instead of a straight line under the current page, you get a straight line with a pointer/triangle in the middle of the line pointing up at the menu/word.
Clear as mud?
I’ll try and find a site with it… I’ve seen them, but dont remember which ones…
regards
Fiona

May 12, 2018 at 6:16 pm #955808
Mike
Moderator
Hi,
Try this code in the General Styling > Quick CSS field:
```
.avia-menu-fx .avia-arrow-wrap {
    height: 20px!important; 
    width: 20px!important; 
    position: absolute;
    top: -15px!important; 
    left: 50%;
    margin-left: -10px!important; 
    overflow: visible!important; 
    visibility: visible!important; 
}
```
Best regards,
Mike
May 15, 2018 at 7:20 am #956815

FionaH
Participant

Great, thanks Mike.
How do you change the colour of the diamond? I tried adding color: #498ad8!important; but it made no difference…

May 15, 2018 at 1:04 pm #956963
Mike
Moderator
Hi,
Please add:
```
.header_color .avia-menu-fx .avia-arrow {
    background-color: #498ad8 !important; 
    color: #ffffff;
    border-color: #498ad8 !important; 
}
```
Best regards,
Mike
May 17, 2018 at 4:59 am #957893

FionaH
Participant

AWESOME. Thank you.

May 17, 2018 at 5:03 am #957896

Mike
Moderator

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
And if there are features that you wish Enfold had, you can request them and vote the requested ones here
For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

Best regards,
Mike
Author

Posts

Viewing 21 posts - 1 through 21 (of 21 total)

The topic ‘Make Header Opaque (but keep active menu indicator)’ is closed to new replies.