This topic has 26 replies, 2 voices, and was last updated 8 years by 
-
-
Hi,
I found this discussion (below) from last year and I want to change the black menu to transparent on mobile. How can I do that now?
Also when a page goes mobile with a white menu, there are 2 logos for the menu, first the 3 horizontal lines, then also something that looks like 3 arrows on top of each others right below. Can I remove that second one?
Thanks,
Marc
https://themeforest.net/item/kleo-next-level-wordpress-theme/6776630/comments?page=107
Hi,
For the moment the black mobile menu is set when you have pages with “transparent menu” option activated but in our next update ( which is set to be released around the next week ) you’ll also have more options for choosing the look of your mobile menu.
Stay tuned, Cheers
Hi,
Using this css you will have the mobile menu transparent
COPY CODE@media(max-width:900px) { .navbar { background: transparent !important; position: absolute; } }the css will be adde to wp-admin -> theme options -> general settings -> quick css
the problem with the menu icon it’s because you have loaded one fontello icon library from child and i think you have used same icon name but with different icon, please follow the kb article : https://archived.seventhqueen.com/kleo/article/use-custom-fontello-icons-kleo-theme
Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionThanks Radu, the code works fine. Can I overwrite the transparency settings for mobile menu as well? Now when the menu rolls down it’s a little “too” transparent 😉
I did import fontello icons, but I followed the documentation link you provided. Attached is a structure of my child theme. The only think unclear is that I also imported the font files from fontello in the font folder of the child theme.
Thanks,
MarcHi again,
Replace the previous css with this
COPY CODE@media(max-width:1024px) { .navbar { background:rgba(42, 42, 42, 0.53) !important; position: absolute; } }Play with 0.53 it represents opacity.
Regarding the icons, please back-up your assets folder or entire child theme and then delete the assets folder and start again based on this https://archived.seventhqueen.com/kleo/article/use-custom-fontello-icons-kleo-theme but no change name of any icon, just add your needed icons
That’s all
Let me know
Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionHi Radu,
1. The problem with mobile menu is solved, thanks.
2. The problem with the icons is solved, thanks…. but a new problems showed up right after I was done, it seems closely related:
The “favorite” icon changed from a star to a clock 😉
See the 2 screenshots before (from browser cache) and after.Best,
MarcHi,
1. You’re welcome
2. ODD, Try to re-save theme options….. if not works tell me what you have done you have only added icons or you have removed and added on fontello.com, try to do this again only adding another icons not removing.
Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionHi,
What do you mean exactly by “re-save theme options”? I went and changed a line in custom CSS and hit the save button. Anything else I should be doing?
I did not remove a single icon, I followed the instructions scrupulously and only added new icons. So no removing, no renaming, nothing but 1. upload, 2. add icond, 3 download, 4. upload all to the asset directory of the child theme.
There must be a place where this icon is defined, can we just change it with any star icon to solve this?
Thanks,
MarcHi again,
I mean to just simply save theme options.
try to load this css it should force set the icon favorite… for the activity items
COPY CODE#buddypress a.button.fav:before, #buddypress a.button.unfav:before, #buddypress a.fav.bp-secondary-action:before, #buddypress a.unfav.bp-secondary-action:before { content:"\e98d"; }If it’s displays another icon find the content code form fontello.css or fontello-codes.css file
Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionThanks a lot!!
e98d is the clock in my list. Changed it to e9f7 and it works like a charm.Cheers,
MarcGreat !!!
Have a nice week man !
Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionIf you are pleased with the support service please very much to leave a short review … few words about your experience with the support service.
https://themeforest.net/item/kleo-next-level-wordpress-theme/reviews/6776630
Thank you in advance
Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionYou got it. 5 stars (not clocks) review:
This is my first site with WordPress and their support is fantastic, I ran into a bunch of problems that an expert would know how to solve and their support team has been (and continues to be) very friendly, helpful and responsive.
Thank you for the review and for the 5 stars.
Regards
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionHey Radu,
One more question on this topic. How can I change the width at which the boxed menu gets automatically displayed from 1024px to say 700px (I have a super short menu for now).
Cheers,
MarcHi,
I don’t understand the question, can you please explain in details and add a screenshot please ?
Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionHi,
OK, I realize my description wasn’t so good. Sorry. So my menu display normally and when I start reducing the size of my browser window… at some point the menu switches to the mobile version and I think that happens when the window is less than 1024 pixels wide.
I would like to change that setting to a lower value. Can I put that in my child theme somehow?
Thanks,
MarcHi,
Now I’ve understood about what you are referring, we don’t have such an option from you can change the breakpoint and also we don’t have a quick solution to achieve this, there are to many rules to modify.
Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionOk
Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionHi Radu,
Sorry, I need to reopen this thread.
There is a side-effect of the code you provided is that the title + breadcrumb area disappear below a certain browser size:
COPY CODE@media(max-width:1024px) { .navbar { background:rgba(42, 42, 42, 0.0) !important; position: absolute; } }Can you please provide an update that doesn’t create this problem?
The other problem that was solved in this ticket was the 3 arrows on top of each others right below the mobile menu. I solved it as you recommended by doing another clean download of new icons. The problem is now back, but I have not touched the icon files since fixing it.
You can check it out yourself. Here’s a simple page that has both problems, the title and breadcrumbs + the weird icons: https://www.arbolife.com/events-home/events-attending/
Cheers,
MarcHi,
OK, so I fixed the weird icons by adding this to the quick CSS:
COPY CODE.icon-bar:before { content: '' !important; }I don’t know why it was there in the first place 😉
However, the title and breadcrumb disappearing is really bad, I hope you can help me fix that one.
Thanks,
MarcI have one more issue with this code, so let me summarize it all in this post for you.
What I want: when menu is set to transparent -> the mobile menu is also transparent.
The code you provided works fine for achieving it, but it has 2 side effects:1. The title and breadcrumb area disappearing below a certain browser size (1024px or so)
2. It makes the whole page get hidden behind the mobile menu (removes padding) when a non-transparent mobile menu is being used.
COPY CODE@media(max-width:1024px) { .navbar { background:rgba(42, 42, 42, 0.0) !important; position: absolute; } }Can you please suggest another fix that doesn’t break the other things ?
Cheers,
MarcHi,
That’s because the content area goes under the header, try with this css instead of that
COPY CODE@media(max-width:1024px) { .navbar { background:rgba(42, 42, 42, 0.0) !important; position: absolute; max-height:100px !important; } div#main { margin-top: 100px; } }Let me know
Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionHi Radu,
Thanks, we’re getting closer…
The new code solves the 2 problems:
1. Breadcrumb and title now stay visible
2. The page doesn’t get hidden behind the mobile menu -> when a non-transparent mobile menu is being used.However, it created a new problem. When transparent menu is being used, it creates a white margin of 100px on the top and that’s not the prettiest.
I’m leaving the code on the test site so you can take a look:
Transparent menu – now white a white margin appearing on top:
https://www.arbolife.com/arbolife/
Normal menu with title and breadcrumb working fine:
https://www.arbolife.com/arbolife/events-home/survey/Cheers,
MarcHi,
Add also this css
COPY CODE.navbar-transparent #main { margin: initial !important; }Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionHi Radu,
Fantastic, thank you. IMHO, this should be the standard setting of the theme with the possibility of letting user choose the transparency.
Cheers,
MarcNo problem
Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
The forum ‘General questions’ is closed to new topics and replies.
whoweez PURCHASED
Good day,
Is there anything I can do with the black Mobile header (menu)? Is there anyway I can have a transparent/specified colored menu…
P.S I see on iPad landscape the transparent menu is still active, which means the rest is down to adjusting media queries to have the same effect on mobile…?
Please let me know. The black is not fitting with the current theme colors at all…
Thanks, Wzz