[luis_gil7Participant]

Hi,

I have 3 issues with my site:

1)

I have been working awesome with “the x theme” but suddenly a space between the header and the content appeared. It happens to all my pages excepting my homepage.

http://greamspot.com/wp-content/uploads/2015/09/extraspace.jpg

So looking for a response here, I thought I had solved the problem by reducing the Navbar Top Height (px) from 50px to 0px at the customizer section (header). However, the lines of my sitelinks change its position and they locate above the sitelinks instead of staying below them.

Look at that: http://greamspot.com/wp-content/uploads/2015/09/lineabove.jpg

And when I do that, the final result is that all my pages have an awful line above the sitelinks and my homepage gets even worse.

http://greamspot.com/wp-content/uploads/2015/09/awfulhomepage.jpg

So, I think the main problem is the extra space between the header and the content (first image). Can you help me out by telling me how to reduce it withouth reducing the Navbar Top Height (px)? Because if I do it, I will have the new problem with the line above the sitelinks of the Navbar.

2) Im am having some trouble trying to make the nav bar for mobile sticky at the top. It works great on desktop but I need it to work on mobile devices.

I tried by adding the following code on the Custom CSS option but it didn’t work on my website.

@media (max-width: 979px) {
.x-navbar-fixed-top {
position: fixed !important;
}
}

3) Every time I enter my site (www.greamspot.com), my main slider takes too long to load (I created it using the Revolution Slider plugin) and I see the default background (light blue colour) and that is awful. It doesn’t look professional. Do you know why it is happening?

http://greamspot.com/wp-content/uploads/2015/09/wrongbackground.jpg

Thanks for your help!

Luis

[FriechModerator]

Hi Luis,

Thanks for writing in! 1) Base on your screenshot it seems you are referring to Breadcrumbs you can disable that on Customizer under the Header tab.

2) Please follow the instruction provided here.

3) It seems your home page is not accessible? Please confirm.

Cheers!

[luis_gil7Participant]

Hi,

1) Problem solved! thanks a lot! 😀

2) I have just noticed that it works good on my mobile but only if I scroll down on the homepage. On the other ones the navbar is not sticky. So I think I should follow the instructions you provided me, but I dont understand why I have to deactivate the cache plugin. Do you mean the “WP Super Cache” plugin? because it is supposed to make my website faster, and actually I think my site is a bit slow 🙁

3) I have just made it accesible again. The thing is that as I am still working on my site, I didnt want my potential customers enter my site if it is not ready. (by the way, do yo know how to change the url where I am working on my site while the customers who access my site just see an “Under construction” temporary page?)
Besides helping me out regarding the loading delay of my revolution slider, I find my site very slow for mobile. I downloaded the W3 Total Cache plugin but this message appears in the plugins section: “The Page Cache add-in file advanced-cache.php is not a W3 Total Cache drop-in. It should be removed”, so I dont know what to do to make my site faster, especially for mobile.

4) I’ve got one more question. How can I give transparency to a specific background? Let me show you what I would like to do:

http://greamspot.com/wp-content/uploads/2015/09/transparency.jpg

As you can see on the image, I would like to give transparency to the areas pointed by the red arrow so the main background of that section (pointed by the green arrow) is able to be seen. Hope you get it 🙂

This was my try:
In Advanced Options I added in the ID box the following: #x-content-band-10

Then, I added the following code on the Custom CSS option but it didn’t work on my website

#x-content-band-10 {
background-color: rgba(45, 45, 45, 0.5) !important;
}

Hope you can help me again

Thank you in advance,

Luis

[John EzraMember]

Hi Luis,

Thanks for updating the thread!

For #3 use this css:

div#x-section-1 {
    background: none!important;
}

For #4 use this:

#x-content-band-10 {
    background: rgba(45,45,45,0.5)!important;
}

#x-content-band-10 .x-column.x-sm.x-1-4:first-child {
    background: rgba(96,96,96,0.5)!important
}

Note you have to remove the # in the ID, this is causing the error.

# should only be used in CSS for ID. In HTML it should only be id=”yourID”

#x-content-band-10 should only be x-content-band-10 when entered in the ID field.

Hope this helps – thanks!

[luis_gil7Participant]

Hi again,

#3 y #4 worked perfectly! Thanks a lot!

I need your help one more time please.

1) I didn’t understand your “2) Please follow the instruction provided here” because the response there wasn’t that clear for me. Can you explain it to me better please? The topic is that I need the top navbar be sticky for mobile. Actually it works great with the homepage (for mobile) but with the others it is not sticky at all.

2) Which plugin do you recommend me to download in order to increase the speed of my website?

3) I would like to increase opacity of the background image of one of the sections of my website. This is the section I would like to enhance:

http://greamspot.com/wp-content/uploads/2015/09/increaseopacity.png

So, I tried to do it assigning the section an ID, just as I did with the previous section. So I assigned the ID x-content-band-13 and then I copy the following code:

#x-content-band-13 {
background: rgba(109,30,97,0.7)!important;
}

but it didn’t work at all.

Then, I wrote in the Style textbox: opacity: 0.5 but the result was even worse.

do you know how to do it?

4) REVOLUTION SLIDER:

I changed my mind and now I wanna have just one slide and my idea is to have a great animation with the text and button I added. However, I am having troubles because the texts have an animation that makes them ease in and out, but after that they vanish.
So I would like to have the animation for the text I added to my slide, but with no loop. I just want them to ease in an that’s it. I want them to remain there. I dont know how to do it.
I tried looking for these options but with no luck at all.

http://greamspot.com/wp-content/uploads/2015/09/idontwantitoloop.png

Please help me

5) REVOLUTION SLIDER: Do you know how to embed a hyperlink to a BUTTON? I tried adding this code inside the textbox where you can write your text. This was my try:

Iniciar mi Sueño AQUI<i class=”fa-icon-chevron-right”></i> <href=’//greamspot.com/contacto/’>

I want the button to redirect users to my “contact” page, but what I finally had was to have my whole slide clickable and it redirected me to the same page, I mean the homepage.

I would appreciate if you are able to help me. Unfortunately I wasn’t able to find it in forums.

Thanks

Luis

[Paul RModerator]

Hi Luis,

1. Sorry for the confusion, to make your navbar sticky in mobile. You can add this in custom > css in the customizer

@media (max-width: 979px){
body .x-navbar {
    position:fixed;
    width:100%; 
    top: 0;
    left: 0;
    right: 0;
}
}

2. You may refer to this link for your guide on how to improve your site performance

https://community.theme.co/kb/performance/

3 & 4 I need to see this first hand to be able to provide you with a code.
Can you provide us your wordpress admin login in a private reply.

5. Change your code to this

<a href="http://greamspot.com/contacto/">Iniciar mi Sueño AQUI<i class="fa-icon-chevron-right"></i> </a>

If you have any additional questions not related with the original topic we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

[luis_gil7Participant]

This reply has been marked as private.

[LelyModerator]

Hello Luis,

1. Please update the following:

@media (max-width: 979px){
body .x-navbar {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
}
}

To this:

@media (max-width: 979px){
body .x-navbar {
    position: fixed;
    width: 100%;
    top: 38px;
    left: 0;
    right: 0;
}
.x-topbar{
    position: fixed;
    width: 100%;
}
}

Above will make the topbar fixed and adjust navbar position so it will not overlap.

3. Please add background image to this section (#x-content-band-13) then add the following CSS

#x-content-band-13 {
background-color: rgba(109,30,97,0.7)!important;
}

4. Upon checking you revolution slider text, your Animation Easing is Power3.easeInOut. Please select Animation with just easeIn

5. Please update the link code to this:
<a href="http://greamspot.com/contacto/" class="custom-link">Iniciar mi Sueño AQUI<i class="fa-icon-chevron-right"></i> </a>
Then define class custom-link like below:

.custom-link{
 text-decoration: initial !important;
 color: red; /*change to your preferred color*/
}

Please refer to this:http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380/comments?page=255&filter=all#comment_7360736

6. Unfortunately, revolution slider is still a third partly plugin. As much as we want to help you with everything, our support is limited for this plugin and it only covers setup issues and integration issues. Thank you for understanding.

Hope this helps.

[RadModerator]

Hi there,

1. Change your css to this,

@media (max-width: 979px){
body .x-navbar {
    position:fixed;
    width:100%; 
    top: 38px;
    left: 0;
    right: 0;
}
body .x-topbar {
position: fixed;
width: 100%;
}
}

3. I don’t see this css being added,

#x-content-band-13 {
background: rgba(109,30,97,0.7)!important;
}

I added it and it works but I’m trying to enable your cache plugin to clear its cache, but seems you’re currently working it. My recommendation is clear your plugin’s cache before deactivating them, then it mu stay deactivate while you’re developing your site. Caching is only recommended on live and finished site.

4. Please turn off loop single slide at your slider’s setting.

5. You can delete the layer where the button is, or just edit it again to add your old content. You can also a dummy button, then just add link under Link & Seo to link the whole slide.

6. Your expected result from the preview is just simulation of the slider of that specific devices size. But it’s not really simulate the actual device. Devices may have different scaling, for example, the preview has a width of 480px, but you tested it on actual device that has 720px width. Thus elements may appear smaller.

Thanks!

[luis_gil7Participant]

Hi!

Im not able to do any changes you recommend me to do because I have this when trying to edit with cornerstone.

http://greamspot.com/wp-content/uploads/2015/09/brokenpage.png

Could you help me please? 🙁

I installed these plugins:
* Autoptimize
* Above the fold optimization
* Google Webfont Optimizer
* ShortPixel Image Optimizer

and also I changed my nameservers to the ones that I was given by Cloudflare.com

I have done this because I need to optimize my website. I got stressed when I saw that the speed of my page is 20/100 (mobile) and 26/100 (desktop) acoording to the PageSpeed Insights website from Google.

Can you help me taking Cornerstone back please? Next time I will ask an advanced developer to work on my speed site.

ps. I have just deactivate most of the mentioned plugins

Luis

[luis_gil7Participant]

And also when my page loads on mobile, this page appears for 2 seconds before the correct one shows up:

http://greamspot.com/wp-content/uploads/2015/09/problem.png

Definitely I did something wrong. I would appreciate your assistance with this.

[Paul RModerator]

Hi Luis,

I tried deactivating Above The Fold Optimization and cornerstone is working now.

Kindly check on your end.

Thanks

[luis_gil7Participant]

Cornerstone works perfectly again.
Thanks!

Now I will check your previous response

[John EzraMember]

Hi there,

Thanks for updating the thread. Yes, Let us know how that goes. Thanks!

[luis_gil7Participant]

Hello,

1) I added the following:

@media (max-width: 979px){
body .x-navbar {
position:fixed;
width:100%;
top: 38px;
left: 0;
right: 0;
}
body .x-topbar {
position: fixed;
width: 100%;
}
}

but nothing happens yet. the navbar remains sticky only on the homepage (mobile). You can check it out

3) by adding:

#x-content-band-13 {
background: rgba(109,30,97,0.7)!important;
}

the background turns to the assigned color, but Im not able to see the background image. The colour overlaps the background image. What’s more, I just wanted to keep the original background image, but making it a bit darker. the opacity is not working either. You can check it out

4) I did what you recommended to me but it is still not working. I mean, I want my text not to fade away after easing in. It is true that it is not easing out anymore but it fades away. Is there any way to make it static after the first easing in animation?

5) “Then define class custom-link”

in which part of the LINK&SEO section I should add this?

6) I got it. Thanks. If next time I dont find a solution, I will upload just a background image.

7) In case I decide to add a background image, how can I add a button over that image using Cornerstone? Hope I dont have problems.

Thank you again.

Luis

[Author]

Posts