EM/REM - Forum | JoomShaper
Solved SP Page Builder

EM/REM

Asked by Michael Agape 3 years ago Last activity 3 years ago

Greetings,

I used the live chat to ask about EM/REM as I work on a large display and when I view the website on smaller displays, things are out of alignment, especially text. The Tech on the Chat gave me a link for a Joomla tutorial, but it goes to a 404 message as does the link to a tutorial for Media Quearies.

Here are the links: https://www.joomshaper.com/documentation/joomla/how-to-use-em-and-rem-in-joomla

https://www.joomshaper.com/documentation/joomla/how-to-use-media-queries-in-joomla

I'm searching the forum for assistance. Any help will be appreciated.

The site I am working on is jfkx.org

Have a blessed day

Accepted answer

Marked as the solution
Mehtaz Afsana Borsha Staff
3 years ago

Hi

Use this custom CSS

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a{
  color:red !important;
}
.sp-megamenu-parent>li.active>a, .sp-megamenu-parent>li:hover>a{
  color:#dca4a4 !important;
}
.burger-icon>span{
  background-color:white !important;
}

Go to system--> https://prnt.sc/tDbSUJh6LiGu --> Default template-->Template options--> https://prnt.sc/A5nlsBvCQsqs And add your CSS there.

9 more replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
3 years ago

Hi

Thanks for contacting us. Could you please give me that link where you have faced this issue? And also give me a screenshot of your issue please.

-Regards.

Michael Agape Asked this
3 years ago

Your image upload button here does not work. It opens a link just like the button to the left of it so I cannot share screen capture. I got most things working. Now the Helix header will not let me change font color, link hover colors, etc and the menu "hamburger" is black and will not change to white.

Mehtaz Afsana Borsha Staff
3 years ago

Give me your site URL please.

‏‏‎ ‎J‏‏‎‎e‏‎‏‏‎‎n‏‏‎‎s W.‏‏‎
3 years ago

@Mehtaz Afsana Borsha

He already gave you the url.
Have a look at his first post.

The site I am working on is jfkx.org

Have a nice day.

Michael Agape Asked this
3 years ago

Thank you Jens

Michael Agape Asked this
3 years ago

That worked. Now how about some code for the social media icon color/link color? Nothing is working in Presets for Helix Ultimate. I am fine with this workaround. Thank you

Mehtaz Afsana Borsha Staff
3 years ago

In that case you can use this custom CSS

#sp-menu ul.social-icons a {
    color: #cc1712 !important;
}
Michael Agape Asked this
3 years ago

That CSS changed the social media icons. Now what is the CSS for hover link color change. I cannot make change in Helix as nothing responds

Michael Agape Asked this
3 years ago

thank you. Now for some reason, the Off Canvas color just changed to white on a white background. The Presets are not responding to color changes still...

Michael Agape Asked this
3 years ago

I just need the CSS code for making Off Canvas menu background Black, Link color White and Link Hover color C22914

‏‏‎ ‎J‏‏‎‎e‏‎‏‏‎‎n‏‏‎‎s W.‏‏‎
3 years ago · edited

For the Background-Color: 

.offcanvas-menu{
    background-color: #000!important;
}

The links are already white.
Edit:
The Links are white, but have a opacity value of 0.7, as result they apear gray.
To fix this, add this code. 

.offcanvas-menu .offcanvas-inner ul.menu>li>a, .offcanvas-menu .offcanvas-inner ul.menu>li>span {
    opacity: 1;
}

Edit end.

For the hover color: 

.offcanvas-menu .offcanvas-inner ul.menu>li a:hover, .offcanvas-menu .offcanvas-inner ul.menu>li a:focus, .offcanvas-menu .offcanvas-inner ul.menu>li span:hover, .offcanvas-menu .offcanvas-inner ul.menu>li span:focus {
    color: #c22914!important;
}

The funny point is, helix ultimate does not support the !important flag within the preset editor.
When you enter the !important flag and hit enter, the complete value disapears.
You must add this changes to the custom.css! :(

@Joomshaper It would be great if you could add this functionality to Helix Ultimate.
-> Enable !important flag within the preset editor.

Mehtaz Afsana Borsha Staff
3 years ago

Thanks for your opinions and thanks for the solution too.

Dear Michael,

If your problems are all solved now and if you dont have any question you can then close this post by accepting the answer.

Michael Agape Asked this
3 years ago

@Jens Thank you very much for your help. I appreciate you taking the time to help me. Shalom to you and yours

Log in to reply.