site title

I am using the slider as a header is that possible to add site title and tagline above slider header will be good if I can show in middle.

Hi @foodies,

I hope you are well today and thank you for your question.

Currently the theme doesn’t display the tagline but you can make it display by using the custom child theme of Sparkling theme shared in the following topic that contains some custom code.

https://colorlibsupport.com/t/sparkling-_-how-to-display-tagline/#post-49221

Best Regards,
Movin

Hi Movin, i have chid them which shows tagline only want to move on the above header image

Could you please share me your site URL where it’s displaying so that i can help you to achieve it?

Hi Movin,
I think I have a problem with child theme because when using child them custom CSS does not work but on main them used the same CSS works fine I have attached both screenshot 1st one is main theme and 2nd one is child them please check my them.

  • I could not fix the problem of slider image can you tell me what size image I need to use as you can see on site .http://www.foodies-cooking.com
    i have child them also can you see that.
I think I have a problem with child theme because when using child them custom CSS does not work but on main them used the same CSS works fine I have attached both screenshot 1st one is main theme and 2nd one is child them please check my them.

This seems happening because you are facing CSS specificity issue as described in the below pages.

Specificity - CSS: Cascading Style Sheets | MDN
Specifics on CSS Specificity | CSS-Tricks - CSS-Tricks
CSS Specificity: Things You Should Know — Smashing Magazine

To resolve the issue please make your CSS more specific.

Hi Movin, thanks for reply Can you please help for this as have posted CSS which I am using as I am not much tec person your help is really appreciated.and what about slider image ??
@media (min-width: 768px){
body.archive .site-main article.post,
body.archive .site-main article.post,
body.blog .site-main article.post,
body.blog .site-main article.post {
width: 50%;
float: left;
}
body.archive .site-main article.post,
body.blog .site-main article.post{
padding-right: 25px !important;
}
body.archive .site-mainarticle.post,
body.blog .site-mainarticle.post{
padding-left: 25px !important;

}
body.archive .site-main article.post .post-inner-content,
body.blog .site-main article.post .post-inner-content {
padding: 25px;
}
body.archive article.post:nth-child(even),
body.blog article.post:nth-child(odd) {
clear: left;
}
body.archive nav.navigation.pagination,
body.blog nav.navigation.pagination {
clear: both;
}
}

#secondary .well,
#page .post-inner-content {
border: 0;
}

@media (min-width: 992px){
.main-content-inner.col-sm-12.col-md-8 {
width: 70%;
}

#secondary {
width: 30%;
}
}

.flex-caption .excerpt {
display: none;
}

#logo .site-name a {
font-size: 35px;
}

You can try changing your shared CSS code as following which makes it more specific.


@media (min-width: 768px){
body.archive .site-main article.post,
body.archive .site-main article.post,
body.blog .site-main article.post,
body.blog .site-main article.post {
width: 50% !important;
float: left !important;
}
body.archive .site-main article.post,
body.blog .site-main article.post{
padding-right: 25px !important;
}
body.archive .site-mainarticle.post,
body.blog .site-mainarticle.post{
padding-left: 25px !important;

}
body.archive .site-main article.post .post-inner-content,
body.blog .site-main article.post .post-inner-content {
padding: 25px !important;
}
body.archive article.post:nth-child(even),
body.blog article.post:nth-child(odd) {
clear: left !important;
}
body.archive nav.navigation.pagination,
body.blog nav.navigation.pagination {
clear: both !important;
}
}

#secondary .well,
#page .post-inner-content {
border: 0 !important;
}

@media (min-width: 992px){
.main-content-inner.col-sm-12.col-md-8 {
width: 70% !important;
}

#secondary {
width: 30% !important;
}
}

.flex-caption .excerpt {
display: none !important;
}

#logo .site-name a {
font-size: 35px !important;
}

Not sure which slider image question you are talking about so could you please explain it a bit more in detail?

Hi, thanks it works.

the mainslider image was talking which shows post featured image but it does not show full I have regenerated image but still it is same.when it show in slider it does not look same as in featured image

I visited your shared site and it seems you are using Jetpack plugin on your site so could you please try temporary deactivating its Photon module on your site?

This jetpack photon module is not updating the images stored on wp.com so to resolve the issue either disable this module or update the images on wp.com by contacting jetpack support team.

Then regenerate the thumbnails on your site using following plugin.

Thanks,Movin
it works.I have regenerated the thumbnail does not show in full slider.

how can I remove white space? either I can add color on white space.

You can apply site body color to slider background by using below custom CSS code.

#page .flexslider {
    background: #f2eee2;
}

it works thanks.

Hi, movin
How can i style and change the font size of nav menu and menu font size?

You are most welcome here :slight_smile:

To help us keep support thread separates could you please create new thread for each of your other questions here https://colorlibsupport.com/c/sparkling/ instead of asking them in your single thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.