-
-
Hi there –
I have my header set to simple style and transparent, but I also have the background color set to black. Despite that, on any page without a custom header image, the header/menu displays with a white background. My menu text has to be white because of the images I use for headers on other pages, so the menu can’t be seen without an image. I thought setting the background color to black would solve that, but it doesn’t seem to do anything at all. How can I get the header to have a black background when the page doesn’t have a header image set?
I also am unable to get the active header to work on my portfolio entries. I set an uploaded image and save the changes, and nothing happens. It just makes the header wonky.
My site is private at present, so I can let you know the login details ASAP. Thanks for your help!
-
Hello,
Please send us the login details in a private reply. So we can solve it for you.
Best regards!
-
-
Hello,
Sorry for the late reply.
The page header is an important feature that also enables other features of the theme such as background transparency. If you do not want to use a page header image in pages with a transparent background, then you have to fix it with a little css.
I made a test page to show this, please open the page’s custom css box (screenshot). You will find this code:header#header { background-color: black; }
This will change the background of header of only this page. Add it to all the pages you do not want to use page header image.
-This effect is not available by theme options, but achieved via css code. To have it please add this code into your custom css box:.header_page .container { width: 16%; top: 40%; height: 15%; background: rgba(0,0,0, 0.83 ); } .header_page h1 { line-height: 93px;}
Best regards!
-
Thanks for the help! If I wanted the header title effect to not extend to the bottom of the image but just contain the title text, how would I alter that CSS? Thanks again!
-
Hello,
Can you please explain better? I don’t understand. What do you mean by “the header title effect to not extend to the bottom of the image“? The header titles do not extend their background images. Send us a screenshot if you can, so we can understand better.
-It is not possible to add image to portfolio page header. We will change this in the next update.Best regards!
-
-
-
Hello,
You had errors in your custom css box. The comment tag you used is not correct. To comment use these
/* comment text*/
. I changed the header height from 15% to 32%.
I added this code into the contact us page’s custom css box:.vc_empty_space { display: none; } .header_page .container { width: 90%; top: 0%; height: 100% !important; background: none; }
-The three bar menu, is the side bar navigation. I set it off at General Options > Layout > Extra Side Navigation.
Please check your site and let us know.Best regards!
-
-
Hello,
You can change the header style of a page in Page’s General Settings > Page Header Options > Page header style (screenshot). The centered style is what you have used in the “Mission and vision” page, and the basic with breadcrumbs is used in the ‘Contact us’ page.
Sorry but it is not possible to use both style in a page.
If you do not want the page title to display in a certain page, just add this code:.header_page .container { display: none; }
into that page’s custom css box (screenshot).
Best regards!
-
-
Hello,
You can enable borders at Specular -> Styling Options -> elements Styling -> https://www.clipular.com/c/5314966746824704.png?k=NnP5ELlj8p_xovTtDeorxUaEFkA
Best regards!
-
-
Hello,
Sorry for the late reply.
1-It is not possible to have a paralax effect in page header.
2-The secondary text is actually the categories of portfolio item. To change that you need to edit file \includes\view\portfolio\loop-grid.php.
What other text do you want to display there? If you want to show excerpt, find these lines:<div class="center-bar v1"> <h4 data-animate="fadeInUp" class="a1"><?php echo get_the_title() ?></h4> <h6 data-animate="fadeInUp" class="a2"><?php echo $sort_classes ?></h6> </div>
And replace with these:
<div class="center-bar v1"> <h4 data-animate="fadeInUp" class="a1"><?php echo get_the_title() ?></h4> <!--<h6 data-animate="fadeInUp" class="a2"><?php echo $sort_classes ?></h6>--> <h6 data-animate="fadeInUp" class="a2"><?php echo codeless_text_limit(get_the_excerpt(), 16)?></h6> </div>
If you want to show content text instead, just replace this function
get_the_excerpt()
with this:get_the_content()
16 -> is the number of words to display. Change it to the value you want.3-To make wordpress recognize the
<br>
tag, go to file vc_templates/list_items.php and find this line:$output .= esc_html($title);
replace with this:$output .= $title;
Best regards!
-
-
Hello,
To remove the page header for a certain page, please go to page’s General Settings > Page Header Options > Active Page Header, set it OFF.
I already set it off for the page you send us.**If you are satisfied with our theme and support, please consider to rate us with 5 stars. It will help us keep up the ratings and gives us the chance to work harder for better themes in the future.
Thank you!Best regards!
-
-
-
Hello,
1- To have the parallax effect of the suggested pages, go to page’s General Settings > Page Header Options. Set up options like in the screenshot.
2- For the page header in portfolio items, i added this code into your custom css box:.single-portfolio .header_page .container { width: 90%; top: 0%; height: 100% !important; background: none; } .single-portfolio #header { background-color: #2f589a; } .single-portfolio .vc_empty_space { display: none; }
It’s ok now.
3- For the sub-menu items distance add this code into your custom css box:nav .menu li { height: 45% !important; top: 28% !important; }
Edit the values to your wish.
Best regards!
-
Thank you again, all excellent. I think I have what may be my last question!
On the Case Studies page I’m using the Post Grid option in the page builder. When you mouseover each image, there’s some stray code showing between the title and page excerpt – I can’t figure out where it’s coming from or how to remove it so that it just shows the title and excerpt:
Also, how is the 3D effect in the header area achieved on this demo page?
https://codeless.co/specular/business2/?portfolio=single-portfolio-7
Thanks!
-
Hello,
1-Go to file: include/core/codeless_elements.php, find this line:
vc_remove_element("vc_separator");
edit to this://vc_remove_element("vc_separator");
Save file.2-It has a shadow effect enabled. It is an option available only for header style > “Menu Item with Border Bottom”. For that go to Header Options > Header Shadow.
Best regards!
-
-
Hmm, by default the hover of links is the Primary Base Color Option that you can change in Theme Options -> Styling. If you want to add a custom hover color for links use the CSS Box in Theme Options.
Let me know if you need further help.
Thanks
-
-
Hello,
This is what i see when accessing your site from mobile: screenshot. The images are all sized properly. What issue do you have here?
Best regards!
-
-
Hello,
Please add this code into your custom css box:
@media (max-width: 767px){ .wpb_column .wpb_wrapper p strong { line-height: 1;} .header_page { background-size: contain !important;} }
PS: You can change the header background image size, but then you will loose the parallax effect. It’s not possible to make a full resize and keep the parallax too.
Let us know.Best regards!
-
-
Hello,
I see that the title is ok. It does not overlap any more (screenshot).
As for the header image, the image can be scaled down to a precise width, enough to leave space for the parallax effect. Add this code:@media (max-width: 767px){ .header_page.centered { background-position: inherit !important;} }
NOTE: For any other question or query please open up a new ticket. This is getting overloaded and it has lost it’s original point long before.
Best regards!
-
You must be logged in to reply to this topic.