-
Search Results
-
Just finished the bulk of my site and wanted to share with you my Additional CSS. The menu of the mobile site is probably important for you for the next version.
/* This targets the specific background container in Ashe Pro */
.header-image-inner {
position: relative;
}
/* This creates the dark layer and forces it to show */
.header-image-inner::after {
content: “” !important;
display: block !important;
position: absolute !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6) !important; /* Adjust 0.6 to 0.8 for even darker */
z-index: 1 !important;
}
/* Adds a shadow to the Tagline for better readability */
.site-description {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
font-weight: 500;
}
/* Optional: Adds a shadow to the Site Title too */
.site-title a {
text-shadow: 2px 2px 5px rgba(0, 0, 0, 1);
}
.site-description {
background: rgba(0, 0, 0, 0.5); /* Black with 50% transparency */
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
margin-top: 15px;
}
/* Move Featured Link titles to the TOP of the first three boxes */
.featured-link .cv-outer {
display: flex !important;
align-items: flex-start !important; /* This moves it to the top */
height: 100%;
}
.featured-link .cv-inner {
display: block !important;
width: calc(100% – 20px) !important;
/* Semi-transparent white background */
background: rgba(255, 255, 255, 0.9) !important;
padding: 10px !important;
margin: 10px auto !important;
border-radius: 4px;
text-align: center;
}
.featured-link h6 {
margin: 0 !important;
font-size: 14px !important;
font-weight: 800;
color: #000000 !important;
}
/* 1. Hide the box if the h6 is empty or contains only a space */
.featured-link .cv-inner:has(h6:empty),
.featured-link .cv-inner:not(:has(h6:not(:empty))) {
display: none !important;
}
/* 2. Double-check: if the inner div itself is somehow empty */
.featured-link .cv-inner:empty {
display: none !important;
}
/* Ensure the link covers the whole area */
.featured-link a {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
/* Force all Featured Link images to the same height and width */
.featured-link img {
height: 250px !important; /* Adjust this number to make the boxes taller or shorter */
width: 100% !important;
object-fit: cover !important; /* This prevents the image from looking stretched */
object-position: center !important; /* Keeps the focus on the middle of the photo */
}
.featured-link {
overflow: hidden; /* Keeps everything tidy inside the box */
}
/* Target the Podcast Category Archive Page */
.category-podcast .read-more a {
font-size: 0 !important;
text-transform: uppercase;
}
.category-podcast .read-more a::before {
content: “Listen Now” !important;
font-size: 14px !important; /* Adjust size to match your theme */
visibility: visible !important;
display: inline-block !important;
}
/* If your theme uses an arrow icon, this hides it for podcasts */
.category-podcast .read-more a i {
display: none !important;
}
/* Ensure images in specific categories maintain a consistent aspect ratio */
.category-community-resources .post-media img,
.category-partnerships .post-media img {
width: 100%;
height: auto;
object-fit: cover; /* Ensures the image fills the area without distortion */
aspect-ratio: 16 / 9; /* Adjust this ratio (e.g., 4/3 or 1/1) to match your preference */
}
/* Optional: Removes any theme-specific padding/margins that might differ */
.category-community-resources .post-media,
.category-partnerships .post-media {
margin-bottom: 20px;
}
/* 1. Remove the link capability from parent items */
#mobile-menu .menu-item-has-children > a {
pointer-events: none !important;
cursor: default;
}
/* 2. Stretch the toggle area to cover the whole row */
#mobile-menu .menu-item-has-children {
position: relative;
}
#mobile-menu .sub-menu-toggle {
position: absolute !important;
top: 0;
left: 0;
width: 100% !important; /* This makes the whole row clickable */
height: 100% !important;
min-height: 45px;
text-align: right;
padding-right: 20px;
display: flex;
align-items: center;
justify-content: flex-end;
z-index: 10;
pointer-events: auto !important; /* This ensures the click is captured */
}
/* 3. Style the arrow to make it clear it’s a dropdown */
#mobile-menu .sub-menu-toggle::before {
font-family: “Font Awesome 5 Free”;
content: “\f107”; /* Down arrow icon */
font-weight: 900;
font-size: 16px;
}
/* Adds a dark tinted box behind the slider text */
.slider-item .slider-info {
background: rgba(0, 0, 0, 0.4); /* Black with 40% transparency */
padding: 20px 30px;
border-radius: 5px;
display: inline-block; /* Keeps the box tight around the text */
}
.slider-item .slider-info h2 a {
color: #ffffff !important;
}
/* Adds a dark tinted box behind the slider text */
.slider-item .slider-info {
background: rgba(0, 0, 0, 0.4); /* Black with 40% transparency */
padding: 20px 30px;
border-radius: 5px;
display: inline-block; /* Keeps the box tight around the text */
}
.slider-item .slider-info h2 a {
color: #ffffff !important;
}
/* Hide the slider by default on all pages */
.slider-item,
.flexslider {
display: none !important;
}
/* Show the slider only on the homepage */
.home .slider-item,
.home .flexslider {
display: block !important;
}
/* Fix for Featured Link labels getting cut off */
.featured-links .featured-link-title {
padding-bottom: 5px !important; /* Adds space at the bottom of the text */
overflow: visible !important; /* Prevents the container from hiding text */
line-height: 1.2 !important; /* Adjusts spacing between lines if text wraps */
}
/* Ensures the text box itself has enough height */
.featured-links .featured-link-content {
padding: 10px !important;
min-height: 60px; /* Forces a minimum height so long text doesn’t hit the edge */
}
Topic: Very poor scores on mobile
Hello,
I have been fighting with my site for the past several days trying to speed things up, especially on mobile. My hosting site says it’s not on their end and won’t provide much help.
I am having a lot of problems with image sizes (I need help learning what size I need to put them in for them to work well because the ratios are different on every page). I also have several things that keep coming up as issues:
jquery issues
@babel/plugin-transform-classes
layout change issues
Google Font issues (pretty sure this isn’t theme-related, but thought I’d mention)
<span class=”lh-audit__title” style=”-webkit-tap-highlight-color: transparent; box-sizing: border-box; color: #212121; font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 14px; background-color: #fafafa;”><span style=”-webkit-tap-highlight-color: transparent; box-sizing: border-box;”>Avoid serving legacy JavaScript to modern browsers</span></span><span style=”color: #212121; font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 14px; background-color: #fafafa;”>
</span>And then height and width not set and largest contentful paint
I do not know what is coming from where and would appreciate any advice you can give. I am about to give up on my new site.
Editing to add:
I have removed the sidebar, alt sidebar, header, and featured links to make the site faster. I am not happy with how my site looks so stripped down, though I don’t need all of those features. I’m not even sure how much all of that affected the speed. It’s been testing all over the place.
Thank you again so much,
Amanda
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 !
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. 🙂
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!
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.
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;
}
Viewing 12 results - 1 through 12 (of 12 total)
Viewing 12 results - 1 through 12 (of 12 total)