Edits to make Mobile like an APP

This topic has 14 replies, 2 voices, and was last updated 5 years, 6 months ago by Elise Noromit.

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

Author

Posts
June 20, 2019 at 7:23 pm #129496

Michizzy213
Participant

Hello Great Theme I have used loads and nothing comes close to this hands down.

I would like to know how to do the following;

I would like to completely customize the mobile menu colors;(CSS please)
I have a categories menu so i have the Two tabs at the top (Menu and Categories)
I would like to customise the color of that text and the Tab Background colours as well as all
The menu item colors and background colours (Submenu’s included) Also the color when an item has been clicked.

Then I would like to disable the footer on mobile i tried collapse widgets on mobile it doesnt work i hid the widgets using widget options the only problem is I have the footer background color loading aswell as a white space.

Finally do I have any customization (no coding) options for the sidebar that loads on mobile and tablet. The one where i have my different product attributes?

Kind regards

Attachments:
You must be logged in to view attached files.

June 21, 2019 at 8:24 am #129551
Elise Noromit
Member
Hello,

Thank you very much for choosing our theme and for contacting us.

Please add this code to the Theme Settings > Custom CSS > Global:
```
body .menu-categories-container .site-mobile-menu li a{
    color: yellow;
	background-color:red;
}
body .menu-categories-container .site-mobile-menu li a:hover{
    color: blue;
	background-color:red;
}
body .menu-categories-container .site-mobile-menu li.current-menu-item > a{
	    color: green;
	background-color:red;
}
```
Replace the colors as per your needs.

Here is code for the footer, add this code to the Theme Settings > Custom CSS > Mobile:
```
body .woodmart-prefooter,
body .footer-container{
display:none;
}
```
You can find the sidebar options in the Theme Settings > Shop > Sidebar and Titles.

Best Regards
June 24, 2019 at 8:29 am #129775

Michizzy213
Participant

Thank you the footer code works however the menu code has an error on Line 9 so the code isn’t working

June 24, 2019 at 9:28 am #129788

Elise Noromit
Member

Hello,

Please provide your site admin access to the private area.

Best Regards

June 24, 2019 at 1:53 pm #129841

Michizzy213
Participant

Hello I this is the code I have in the global settings:
.mobile-nav,
.mobile-nav .sub-menu-dropdown ul {
background-color:#170626;
}
.mobile-nav ul li a {
color:#FFFFF2;
}
.mobile-nav ul li a:hover {
color:#f61067;
}

.mobile-nav .icon-sub-menu:after,
.mobile-nav .icon-sub-menu:before {
background-color:#170626;
}
.mobile-nav .sub-menu-dropdown ul:before {
content:none;
}

However it seems that this mobile menu only loads on other pages and not the home page secondly i have the following requests:

I would like the Top Tab in the Mobile Menu to keep the background color however I want the Font of the active Tab to be Green

The Tab that isnt active I would like that font to be white
Finally the icons on the mobile menu I would like them to be White aswell.

Please could you make this entire thread private as well.

Attachments:
You must be logged in to view attached files.

June 24, 2019 at 4:22 pm #129867

Elise Noromit
Member

Hello,

The code does not contain errors. Please provide your site URL and your site admin access.

Best Regards

June 24, 2019 at 5:36 pm #129874

Michizzy213
Participant

I have asked several things that you havent responded to:

However it seems that this mobile menu only loads on other pages and not the home page secondly i have the following requests:

I would like the Top Tab in the Mobile Menu to keep the background color however I want the Font of the active Tab to be Green

The Tab that isnt active I would like that font to be white
Finally the icons on the mobile menu I would like them to be White aswell.

Please could you make this entire thread private as well.

June 25, 2019 at 7:09 am #129925

Michizzy213
Participant

May I kindly get the following:

I need code to change the color of my mobile menu and I would like the Top Tab in the Mobile Menu to be the same color as the background color however I want the Font of the active Tab to be Green

The Tab that isnt active I would like that font to be white
Finally the icons on the mobile menu I would like them to be White aswell.

Please could you make this entire thread private as well.

I just need this thank you.

June 25, 2019 at 8:30 am #129939

Elise Noromit
Member

Hello,

As soon as I get the site admin access to the private area as well as clear instructions what you want to change I will be able to suggest custom CSS.

Just write point by point with the screenshot and the color what you want to change.

Best Regards

June 25, 2019 at 9:38 am #129958

Michizzy213
Participant

Changes:

Mobile Menu Must have the following Background: #170626
Items on the Mobile Menu all Levels must have the following Font Color:#FFFFF2
Active items on the Mobile Menu must have the following font colour: #0CCE6B

Now Two Tabs at the Top of the Mobile Menu (Menu and Categories);
The Active Tab must have The following font color: #0CCE6B
The Inactive Tab Must Have the following font color: #FFFFF2

The Lines between the Menu items can this color also be changed if so please provide the code for this

Kindly find attached all necessary screenshots.
Also please note that currently the mobile menu on the home page is not being affected by style changes I have no idea why.

Attachments:
You must be logged in to view attached files.

June 25, 2019 at 2:49 pm #130017
Elise Noromit
Member
Hello,

Mobile Menu Must have the following Background: #170626 has been done: https://gyazo.com/c5b5f9d7bf8ab9d41701b12844e6efa3

Items on the Mobile Menu all Levels must have the following Font Color:#FFFFF2 has been done: https://gyazo.com/2ec71ec1fe9607a4ba754f07999d44b2

Active items on the Mobile Menu must have the following font color: #0CCE6B

This code has been added:
```
body .site-mobile-menu li.current-menu-item > a{
color:#0CCE6B;
}
```
Borders:
```
body .icon-sub-menu {
    border-left-color:red;
}
body .site-mobile-menu li a {
border-bottom-color:red;
}
```
As you can see the provided earlier code is workable and I have added for border and the current item and everything works.

Best Regards
June 25, 2019 at 4:07 pm #130028

Michizzy213
Participant

Great can this be made private this whole thread?
Also How do I change the My accounts menu on the header please find attached screenshot
I want to change whats on the menu

June 25, 2019 at 7:59 pm #130055

Elise Noromit
Member

Hello,

I can just delete the topic as soon as your issues have been solved.

In order to change the My Account menu, navigate to Woocommerce > Settings > Advanced

Best Regards

June 26, 2019 at 11:53 am #130180

Michizzy213
Participant

Thank you for the edits however there are still a few things that need to change;

The Top Tab Text Fonts need to change they are still the same; So the active tab should be:#0CCE6B and the non active tab should be #FFFFF2 I have attached the first screenshot to show this area

Secondly the Arrows on the menu where there are submenus those arrows need to be #FFFFF2
Please see screenshot 2

Then Finally when a submenu has been selected the arrow background turns Green (#0CCE6B) I would like to change that color to #F34213 Please see Screenshot 3

Attachments:
You must be logged in to view attached files.

June 27, 2019 at 6:13 am #130275
Elise Noromit
Member
Hello,

Please add this code to the Theme Settings > Custom CSS > Global:
```
body .mobile-nav-tabs .active {
    color: #0CCE6B;
}
body .mobile-nav .icon-sub-menu:after, 
body .mobile-nav .icon-sub-menu:before {
    color: #FFFFF2;
	background-color:transparent;
}
body .icon-sub-menu.up-icon{
	background-color:#F34213;
}
```
Best Regards
Author

Posts