Next Release
Roofco Joomla Template
Template dedicated to Roofing and construction, with 4 prebuilt websites for Joomla 5 and 6. Subscribe or renew now and be the first to get it when we launch it.
Forum
- Home
- Forum
- Template Support
- Premium Joomla Templates
- sombra - unable to get header image to display at top
Important - Hands Up!
- Please ask using the account with which you made the purchase or download of our products and in its respective category.
- If you bought our products in another market, ask your questions in that market, not here.
* ADD PRODUCT NAME IN START OF SUBJET
sombra - unable to get header image to display at top
- L
- lesliebuck New Member
- Topic Author 12 hours 25 minutes ago #1
I am using the Sombra template, but I have changed a few things using SP Page Builder. I am having some problems with header images. Please help.
Issue 1 - On some pages, I am unable to get the header image to align properly at the top of the screen. Instead of inserting the header imager in the Joomla menu settings, I am inserting the background image in the settings of the top section of SP Page Builder. This method gives me more control since I do not know how to use CSS to format the header image when inserting it through the Joomla menu page title settings
Issue 2 - On other pages, I do not know how to insert a header image. This seems to be with pages that are not in a Joomla menu, but that are generated dynamically from a component.
Issue 1:
Here is an example of how the header image is displaying properly:
future.tacticalarts.com/training/filipino-martial-arts
The header image is located behind the navigation menu the way I would like it to be.
Here is a page where I am having a problem:
On the Articles page, the header image is aligned the way I like.
future.tacticalarts.com/articles
However, when I click on an article, the header image is not displaying behind the navigation menu, it is below it.
Will you please help me get the background image to display at the top, behind the menu for all the individual articles?
Issue 2:
I am also having a problem with the events listed on:
future.tacticalarts.com/seminars/events
When I click an event the information displays, but there is no header image at all:
I assume that I somehow need to create a page in SP Page Builder to control how these pages display, but I do not know how.
Will you please direct me to a solution to display a header on these individual event pages?Â
Also: I am still working on this page, but I may also have the same problem with the product pages here:
future.tacticalarts.com/store
As you can see when you click on a product, there is no header image. I do not know how to put in an image since the page is dynamically generated.
I am not a developer and this is my first time to work with SP Page Builder. Thank you for any help!
Issue 1 - On some pages, I am unable to get the header image to align properly at the top of the screen. Instead of inserting the header imager in the Joomla menu settings, I am inserting the background image in the settings of the top section of SP Page Builder. This method gives me more control since I do not know how to use CSS to format the header image when inserting it through the Joomla menu page title settings
Issue 2 - On other pages, I do not know how to insert a header image. This seems to be with pages that are not in a Joomla menu, but that are generated dynamically from a component.
Issue 1:
Here is an example of how the header image is displaying properly:
future.tacticalarts.com/training/filipino-martial-arts
The header image is located behind the navigation menu the way I would like it to be.
Here is a page where I am having a problem:
On the Articles page, the header image is aligned the way I like.
future.tacticalarts.com/articles
However, when I click on an article, the header image is not displaying behind the navigation menu, it is below it.
Will you please help me get the background image to display at the top, behind the menu for all the individual articles?
Issue 2:
I am also having a problem with the events listed on:
future.tacticalarts.com/seminars/events
When I click an event the information displays, but there is no header image at all:
I assume that I somehow need to create a page in SP Page Builder to control how these pages display, but I do not know how.
Will you please direct me to a solution to display a header on these individual event pages?Â
Also: I am still working on this page, but I may also have the same problem with the product pages here:
future.tacticalarts.com/store
As you can see when you click on a product, there is no header image. I do not know how to put in an image since the page is dynamically generated.
I am not a developer and this is my first time to work with SP Page Builder. Thank you for any help!
Please Log in or Create an account to join the conversation.
- L
- leoalv Moderator
- 3 hours 32 minutes ago #2
Hello.
Our recommendation is to use the background image of each menu item. Here's a CSS customization that you should paste into templates/ut_sombra/css/custom.css. If you don't have it, you'll need to create it. This way, you won't have any problems on any type of page.
With this, the page titles will be centered, the background image will have the same position, height, and overlay, because we copied the CSS from your section to the one you're using as a background. Now you just need to activate titles in your menu items and select the image you have as your title background.
If you don't see the changes after implementing this customization, clear your browser cache.
After this, deactivate the sections in SP Page Builder that you've set as backgrounds.
Regards
Our recommendation is to use the background image of each menu item. Here's a CSS customization that you should paste into templates/ut_sombra/css/custom.css. If you don't have it, you'll need to create it. This way, you won't have any problems on any type of page.
Code:
body:not(.modal-menu-active) .header-overlap+#sp-main .sp-page-title{padding-top:calc(45px + var(--header_height)) !important;}
.sp-page-title{padding-bottom:35px !important;background-size: inherit !important;background-attachment: fixed !important;background-position: 50% 0 !important;}
.sp-page-title .container{align-items: center !important;}
.sp-page-title .sp-page-title-heading, .sp-page-title .sp-page-title-sub-heading{font-family:'Helvetica', sans-serif !important;}
.sp-page-title.title-image-bg:after{background:rgba(0, 0, 0, 0.2) !important;}
If you don't see the changes after implementing this customization, clear your browser cache.
After this, deactivate the sections in SP Page Builder that you've set as backgrounds.
Regards
Please Log in or Create an account to join the conversation.
Secure Payment
Use your cards with Paypal.
Â
Â
Â
Â
Â
Â
Â
Â