[Stephane]

Hello,

I would like to know if it is possible to add a linear gradient over the header image (it is a slider). Something like this:

  background: linear-gradient(
    to bottom,
    transparent, 
    black
  );

I can’t make it work

Thanks a lot for your help !

• This topic was modified 1 month ago by Stephane.
• This topic was modified 1 month ago by Stephane.
• This topic was modified 1 month ago by Stephane.

[vako]

Hi Lars,

 

At first, thank you for choosing our theme and service.

1. Unfortunately we can’t help in the case of the menu section, there is no way to use theme settings, especially the codings, we can offer to use Page Builder like Elementor page builder with a combination of Royal Elementor Addons, you can build the header section entirely(same as you have with Ashe) and built the main navigation with image background.

2. Regarding the second question to make the body background more transparent,  In order to assist we need to check your website from the back end, please install this 3rd party plugin “Temporary Login Without Password Plugin” which allows us to access your dashboard without sharing access details.

To better understand how the plugin works, please watch the video guide below: https://www.youtube.com/watch?v=EMu0e78OpJo

Please make sure to mark your reply as private to hide it from the public.

 

Kind Regards

[Lars Schulz]

Hey Support Team,

thanks for your great theme! I own the pro for two of my webpages, but i am no professional web page builder. Not really css, http or php skills. I can read a bit code and i now in most cases where to add css etc… nothing else. I hope you can help me.

I want to put an Image as Background for the main navigation bar. So you can read the menu words like home, team, etc. and in the background there is an image. how can i realise this?
I also want to make my main content body a bit transparent, so that you can see shiny the background. Can i do so may be with % and CSS?

I hope, you can help me.

Greetings from the middle of Germany. 🙂

[Zainab Shoukat]

<span style=”color: #0f0f0f; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, ‘Segoe UI’, Roboto, Ubuntu, Cantarell, ‘Noto Sans’, sans-serif, ‘Helvetica Neue’, Arial, ‘Apple Color Emoji’, ‘Segoe UI Emoji’, ‘Segoe UI Symbol’, ‘Noto Color Emoji’; white-space-collapse: preserve;”>I am writing to express my concern and frustration regarding the delay in receiving support for an issue I am facing with your theme. My website is currently live, and I have been eagerly waiting for assistance to ensure its smooth operation. </span><span style=”color: #0f0f0f; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, ‘Segoe UI’, Roboto, Ubuntu, Cantarell, ‘Noto Sans’, sans-serif, ‘Helvetica Neue’, Arial, ‘Apple Color Emoji’, ‘Segoe UI Emoji’, ‘Segoe UI Symbol’, ‘Noto Color Emoji’; white-space-collapse: preserve;”>I submitted my support request </span><span style=”color: #0f0f0f; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, ‘Segoe UI’, Roboto, Ubuntu, Cantarell, ‘Noto Sans’, sans-serif, ‘Helvetica Neue’, Arial, ‘Apple Color Emoji’, ‘Segoe UI Emoji’, ‘Segoe UI Symbol’, ‘Noto Color Emoji’; white-space-collapse: preserve;”>two days ago, and unfortunately, I have not yet received a response. This delay is causing significant inconvenience as I am unable to work on my website seamlessly. </span><span style=”color: var(–text-primary); font-family: Söhne, ui-sans-serif, system-ui, -apple-system, ‘Segoe UI’, Roboto, Ubuntu, Cantarell, ‘Noto Sans’, sans-serif, ‘Helvetica Neue’, Arial, ‘Apple Color Emoji’, ‘Segoe UI Emoji’, ‘Segoe UI Symbol’, ‘Noto Color Emoji’; white-space-collapse: preserve;”>Given that my website is live, it is crucial for me to address and resolve the issue promptly. I understand that you may have a high volume of support requests, but the timeliness of the response is essential to maintain the functionality of my site and meet my business requirements.</span>
<p style=”border: 0px solid #d9d9e3; box-sizing: border-box; –tw-border-spacing-x: 0; –tw-border-spacing-y: 0; –tw-translate-x: 0; –tw-translate-y: 0; –tw-rotate: 0; –tw-skew-x: 0; –tw-skew-y: 0; –tw-scale-x: 1; –tw-scale-y: 1; –tw-scroll-snap-strictness: proximity; –tw-ring-offset-width: 0px; –tw-ring-offset-color: #fff; –tw-ring-color: rgba(69,89,164,.5); –tw-ring-offset-shadow: 0 0 transparent; –tw-ring-shadow: 0 0 transparent; –tw-shadow: 0 0 transparent; –tw-shadow-colored: 0 0 transparent; margin: 1.25em 0px; color: var(–text-primary); font-family: Söhne, ui-sans-serif, system-ui, -apple-system, ‘Segoe UI’, Roboto, Ubuntu, Cantarell, ‘Noto Sans’, sans-serif, ‘Helvetica Neue’, Arial, ‘Apple Color Emoji’, ‘Segoe UI Emoji’, ‘Segoe UI Symbol’, ‘Noto Color Emoji’; white-space-collapse: preserve;”>I kindly request your urgent attention to my support ticket and appreciate your prompt resolution of the matter.</p>
<span style=”color: #0f0f0f; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, ‘Segoe UI’, Roboto, Ubuntu, Cantarell, ‘Noto Sans’, sans-serif, ‘Helvetica Neue’, Arial, ‘Apple Color Emoji’, ‘Segoe UI Emoji’, ‘Segoe UI Symbol’, ‘Noto Color Emoji’; white-space-collapse: preserve;”>Thank you for your understanding, and I look forward to a swift resolution to my support request.</span>

[BorjaF]

Hello guys.

My site borjanopara.com uses a main menu with sub-items on it. On Desktop everything works fine but on mobile version the mobile version of menu has no background and the titles mix with the rest of the website.

Example:

Any ideas how to fix it?

Thanks!

[Michal Kubecki]

When my website is browsed on the desktop in Light Mode, both the Main Navigation and the footer are matching the colour of the background, they’re all white. That way they seem to be transparent. In Dark Mode, however, the background changes to dark grey and both the Main Navigation and the footer change to black. How can I adjust their colour in the dark mode to be transparent or dark grey? Thank you.

[Ariane Bär]

Dear Support Team,

can you please post the results / findings / solutions on the well described and reasonable remarks above? I also got similar feedbacks from testing and am looking for a solution where I can change appearance settings for the responsive mode only?

Really important is the first one mentioned above:
“Blog Page Post Excerpt Text Alignment (serious concern): 
Excerpt text per post on front page appears “justified”, not “unjustified” or “left aligned”; but that looks bad on a narrow vertical mobile phone with too much blank space between words in some lines; more so when you have very long words like in my German language. It doesn’t help to set “Post Content Align” from “Center” to “Left” under “Blog Page/General”; that only changes the headline, but not the excerpt.”

I tried to have a look at the css, but saw that the section 16.0 Typography is missing (despite it’s listed in the table of contents).

Do you have any recommendation how this behavior can be changed to text-align: left; instead of text-align: justify; only for “responsive mode”?

Sth. “like”:

<code class="hljs language-scss" style="padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: var(--_pr-code-fs); vertical-align: baseline; box-sizing: inherit; background-color: transparent; white-space: inherit;"><span class="hljs-selector-class" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-keyword);">.text-justify-xs</span> {
    <span class="hljs-attribute" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-symbol);">text-align</span>: left;
}

<span class="hljs-comment" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-comment);">/* Small devices (tablets, 768px and up) */</span>
<span class="hljs-keyword" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-keyword);">@media</span> (<span class="hljs-attribute" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-symbol);">min-width</span>: <span class="hljs-number" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-namespace);">768px</span>) {
    <span class="hljs-selector-class" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-keyword);">.text-justify-sm</span> {
        <span class="hljs-attribute" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-symbol);">text-align</span>: justify;
    }
}

<span class="hljs-comment" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-comment);">/* Medium devices (desktops, 992px and up) */</span>
<span class="hljs-keyword" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-keyword);">@media</span> (<span class="hljs-attribute" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-symbol);">min-width</span>: <span class="hljs-number" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-namespace);">992px</span>) {
    <span class="hljs-selector-class" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-keyword);">.text-justify-md</span> {
        <span class="hljs-attribute" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-symbol);">text-align</span>: justify;
    }
}

<span class="hljs-comment" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-comment);">/* Large devices (large desktops, 1200px and up) */</span>
<span class="hljs-keyword" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-keyword);">@media</span> (<span class="hljs-attribute" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-symbol);">min-width</span>: <span class="hljs-number" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-namespace);">1200px</span>) {
    <span class="hljs-selector-class" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-keyword);">.text-justify-lg</span> {
        <span class="hljs-attribute" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-symbol);">text-align</span>: justify;
    }
}

Kind regards and have a lovely day

Ariane

[Manfred Hungerland]

Hi again

Thanks to the forum i found the CSS code to move the mainmenu to the top and also make it transparent.

But the Problem is that there is now a gap where the menue.

https://photos.app.goo.gl/jVfp5GKdu9xsgx6j6

CSS:

#main-menu {

/*backdrop-filter: grayscale(1);*/

background-color: #00663380;

}

 

#main-nav {

background: transparent !important;

position: relative !important;

top: 10px;

box-shadow: none !important;

}

.entry-header {

position: relative;

top: -61px;

height: 330px;

}

[vako]

Hi Carolyn,

 

At first, thank you for choosing our theme and service.

Please navigate to Dashboard > Appearance > Customize > Additional CSS section add the following snippet:

#featured-slider .image-overlay {

background-color: transparent !important;

}

 

Kind Regards

[Duke]

Hi,

That article was written in 2021 and the Ashe theme was created 4 years ago, so maybe now they have custom styling support but not back in days.

Navigate to Customize > Additional CSS and add this code, it will enlarge tite and remove backgrounds:

h2.wprm-recipe-name {
font-size: 30px !important;
}

.wprm-recipe-details-container, .wprm-recipe-notes-container p {
background-color: transparent !important;
}

Kind Regards