-
AuthorPosts
-
July 11, 2017 at 5:28 am #819088
Hey guys,
Is there anyway to make the header element like this in enfold?
So it’s a simple hamburger icon that then does a screen overlay of the tabs.
Thank you,
ChrisJuly 11, 2017 at 8:41 am #819158Hey ccyran,
Almost anything is possible with any theme, it just depends on how much time you want to spend on it :-)
Best regards,
RikardJuly 11, 2017 at 3:25 pm #819419Awesome!
Can you help me get this started! :)
Thanks!
ChrisJuly 11, 2017 at 3:35 pm #819432Hi,
Do you have an example of exactly what you need, so we have a visual reference and idea of what it takes to accomplish.
Best regards,
Jordan ShannonJuly 11, 2017 at 3:39 pm #819439Oh wow sorry guys! I thought I added it it! See below :)
July 11, 2017 at 3:40 pm #819445Hi,
No problem, would something like this work for you? http://kriesi.at/themes/enfold-creative-studio/
Best regards,
Jordan ShannonJuly 11, 2017 at 3:42 pm #819447PERFECT!
As long as I get the options to style the font and sizing, word spacing, etc. And control of the actual icon size.
- This reply was modified 7 years, 4 months ago by ccyran.
July 11, 2017 at 4:11 pm #819476Hi,
Sure, that can all be accomplished via css.
Best regards,
Jordan ShannonJuly 11, 2017 at 4:47 pm #819510Awesome!
Thanks Jordan, I appreciate it! Let me know what I gotta do
Best,
ChrisJuly 11, 2017 at 5:22 pm #819533Hi,
Are you looking to begin a new site or is this for your current one you have been working on?
Best regards,
Jordan ShannonJuly 11, 2017 at 5:50 pm #819549July 11, 2017 at 6:20 pm #819572Hi,
Go to Enfold Options > Header > Header Layout > Display of Menu Items > Display as Icon. That should get the initial menu set up for you.
Best regards,
Jordan ShannonJuly 11, 2017 at 10:19 pm #819657Cool!
I tried that but it doesn’t come close to that page you referenced :(
Is it through quick CSS that I have to edit the menu? And is there quick CSS to shrink the size of the icon? I want it to be about 25% smaller.
thank you,
chrisJuly 11, 2017 at 10:37 pm #819664Hi,
Please provide admin info so I can log in and look into this further.
Best regards,
Jordan ShannonJuly 11, 2017 at 11:51 pm #819717Cool!
See below in private content!
FYI: Please don’t make any changes if it can’t easily go back to the way it currently is.
July 13, 2017 at 6:02 pm #820707Hi,
I followed the same steps I posted for you above and received the exact desired effect: https://snag.gy/HLCiUu.jpg.
The text size will have to be adjusted via css as well the icon size. So, you may have to go through and remove some pre-existing css that could be effecting the styling.
Best regards,
Jordan ShannonJuly 13, 2017 at 6:56 pm #820731Hey Jordan,
Understood. Can you provide CSS to adjust the icon size?
Thanks,
ChrisJuly 13, 2017 at 11:28 pm #820862Hi,
Add the following to quick css to adjust the icon size.
.av-hamburger-box{ width:20px!important; } .av-hamburger.av-hamburger--spin.av-js-hamburger.av-inserted-main-menu.is-active .av-hamburger-inner::after{ bottom: 0px!important; } .av-hamburger-inner::after { bottom: -5px!important; } .av-hamburger-inner::before { top: -5px!important; }
Best regards,
Jordan ShannonJuly 13, 2017 at 11:29 pm #820863Awesome, thank you!
July 13, 2017 at 11:31 pm #820868Hi,
No problem at all. Once you configure the text css, that should be about it. I will keep this thread open for additional questions on this specific topic.
Best regards,
Jordan Shannon -
AuthorPosts
- You must be logged in to reply to this topic.