Background Color On Menu In Unfold Template - Question | JoomShaper

Background Color On Menu In Unfold Template

J

Jeanette

Template 1 month ago

I have selected the alternative menu display for this template and are also using sticky menu. But when scrolling down the menu items kind of dissapears cause they are displayed on top of all images and colors in the template. Can you help me so that the menu background always have a set color so that the menu are easyer to see?

Site is her: https://www.vatnamo.no/porter/

I have put the login in hidden content if you need.

0
28 Answers
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 month ago #216994

Hi there,

Thank you for reaching out, and I apologize for any inconvenience caused by this oversight. Please check now and let me know.

Best regards,

Toufiqur Rahman (Team Lead, Support)

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 month ago #217006

Added custom css code inside the custom.css file.

Here is the file location that i have created a custom.css file.

templates/your_templates/css/custom.css

0
J
Jeanette
Accepted Answer
1 month ago #217004

Perfect, thank you so much :)

Can i ask where you changed this in case i want another background color?

Also i would like the menu fonts bigger, but cannot figure out where to change this?

0
J
Jeanette
Accepted Answer
1 month ago #217011

Very good, thanks :)

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 month ago #217017

We are glad to know that your issue has been resolved successfully. If you are comfortable, we would truly appreciate a short 15–20 second selfie video sharing your experience with our support team.

The video may be published publicly on our official social media platforms to help other users understand the quality of our support services. This is completely optional, and we will proceed only with your consent.

Thank you

0
J
Jeanette
Accepted Answer
1 month ago #218583

Hi Toufiq,

Seems i have a follow up on this one.

My logo is now on top, but on MOBILE screen it displays only "half".
I have put this code in custom.css:

@media screen and (max-width: 767px) {
  #sp-header {bottom: auto;top: 0px;}
}

If i change the top to f.ex 30px the logo will show better when opening the page, but when scrolling it will "show half" again.

Also as you can see of the enclosed image, the text on the topimage are not showing when on mobile. Can you check this at the same time please?

Can you help?

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 month ago #218587

Please check now. Thanks

0
J
Jeanette
Accepted Answer
1 month ago #218589

Something happened with the menus now, they are all wrapped to the right. The mobile looks good now, but the desktop menus are weird.

0
J
Jeanette
Accepted Answer
1 month ago #218591

Please can you check this quickly cause i am in the process of showing the site to my customer. Sorry for the inconvenience.

0
J
Jeanette
Accepted Answer
1 month ago #218601

Hellooooo - This is urgent! I dont know where you did a change so i cant fix it myselves.

0
J
Jeanette
Accepted Answer
1 month ago #218608

Hi again,

I want to say it was not good that this was not checked before telling me its done. I had a client meeting to show the website and i could not show it like this. So meeting was delayed cause i needed to fix this.

Ihave tried to fix this myselves and entered the following in my custom.css:

/* trying to let the menu bar not wrap */
.col-10 {
    width: auto;
}

This made the menu be ok again on the desktop but now its bad on the mobile again. Please fix this and also check that it is working on all resolutions.
I suppose this is not to be set in custom.css so please do the needed changes.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 month ago #218615

Now the Pre-defind header is disabled. You can controll it your end by settings.

https://prnt.sc/2nGs7Nd4AVUy

https://prnt.sc/DIbjBiYGmkLe

0
J
Jeanette
Accepted Answer
1 month ago #218618

Hi again,

I dont need to control the menu. I just need the menu to work properly at both desktop. As in your other templates this works fine, but not in this unfold template.

The mobile version is still the same, the logo is to high and the text on the frontpage image are not showing. Will you please check again.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 month ago #218689

Please check now. Thanks

0
J
Jeanette
Accepted Answer
1 month ago #218724

Nothing is working fine now. The menu and logo on the desktop version is fcked up and the menu on the mobile version is gone.

Dont you do any testing before you ask me to check? This is really not good - my client are checking this site atm and it cannot be like this. Please fix this immediately.

0
J
Jeanette
Accepted Answer
1 month ago #218725

desktop:

0
J
Jeanette
Accepted Answer
1 month ago #218726

I have disabled the insert you did in the css but it did not help to fix anything.

I am so frustrated right now, the site top menus, button and logo cannot look like this while my client is testing.

I have no idea what you changed but i need you to reset so the site looks ok at least on desktop for now!

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 month ago #218732

Please flush your server cache. It was working correctly when I checked from my end, but it appears to be broken now.

0
J
Jeanette
Accepted Answer
1 month ago #218734

I have done nothing. It was like this when i came back from the meeting with my client and we started to check the site. I removed the line you put in custom.css, but that did not do anything.

I have cleared the cache but nothing is changing.

0
J
Jeanette
Accepted Answer
1 month ago #218735

Hang on, it looks ok now! But the button to the right is a bit down. It should be on the same heigh/level/row as the menus. Can you check this?

Maybe the cache cleaning took some time to show.

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 3 weeks ago #218795

Could you please check now.

Screenshot: https://prnt.sc/k6mBN5faa6qA

Thanks!

0
J
Jeanette
Accepted Answer
3 weeks ago #218828

Hi again, If i can ask one more thing, that is for the big letters on the main picture to display on mobile (text: Porter for industri og bolig). These are so big that they dont show when on mobile. I checked your demo template and the letters/text are not fully visible there either. Seems like they are not scaling. Could you fix?

Please remember my client is still going through the site so want you to be aware of this so that we dont get the same situation as yesterday. Thank you.

Check screenshot here:

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 3 weeks ago #218830

Please, check now: https://prnt.sc/5MicM7O_agoD

Thanks

0
J
Jeanette
Accepted Answer
3 weeks ago #218832

I can see when using "browser inspect" option and viewing the mobile version it looks ok. But on the actual mobile it dont.

It still looks like this, but it has maybe changed a bit displaying a smaller text but still not fully visible on the image.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 weeks ago #218835

Google Chrome Hjem.jpeg

Safari Browser

IMG_FD51C872E903-1.jpeg

Both mobile browser works fine.

0
J
Jeanette
Accepted Answer
3 weeks ago #218836

I dont understand what you mean with the browsers work fine. On my phone the text "Porter for industri og bolig" are not displayed on mobile. The images you included is also showing that the text is not fully displayed.
The text "Porter for industri...." is placed down on the image and the full text is not visible on your images also.

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 3 weeks ago #218839

Please, check now.

0
J
Jeanette
Accepted Answer
3 weeks ago #218840

Thats perfekt! Thank you so much for all your help, i appreciate it very much.

0