[maikol]

Thanks David,

However that made the sidebar fixed for every mobile screen, so I ended up using this :

@media only screen and (min-width: 767px) and (max-width: 991px) {
.mhs-tablet-port .sticky-widget.stickit {
    position: fixed!important;
}
}

Would you confirm that this is good practice ?

Cheers
M

[maikol]

Hi David,

Sorry I probably mis-expressed myself, what I want is just that the sidebar remains sticky in tablet portrait mode, as it is on larger screens.

Cheers,
M

[maikol]

Hi David,

Thanks again for your answer.

However, I’m having trouble understanding how this :

1)

@media (min-width: 768px) {
.sidebar {
padding: 0;
}
.sidebar.left-sidebar .sidebar-widget-wrap {
padding-right: 0;
}
}

will make the left sidebar stay sticky on tablets in portrait mode ? From what I can see in chrome’s simulation, it just makes the menu wider, and thus much closer to the main content, which isn’t so good. But it doesn’t make it sticky/fixed.

Is it the simulator that maybe has bugs ? Or maybe I misunderstood you ?

Cheers,
Maikol

[maikol]

Hi David !

1) On portrait the sidebar will fold up and god fullwidth which is standard for the bootstrap grid that we use. You would need to use the PB within a page with no sidebar set or modify the theme further to make this work as you describe.

Maybe it’s because I use chrome’s dev tools ipad preview (I don’t have an ipad), but here it appears that the sidebar doesn’t go full width in portrait mode (please see attached capture). Which actually is what I want, appart from the fact that it isn’t fixed.

So my will is just to have it also fixed in this mode. Is this possible ?

2) I should be able to sort this CSS, what is the page URL and can you screenshot this?

Here’s one example of page using the sidebar fixed nav : http://dev.comment-creer-un-site-internet.net/hebergement-nom-domaine-installer-wordpress/

By now those anchor links are all at #333333 color when not hovered (you’ll notice some custom CSS there to have them not in the orange color I set for the general links).

What I’d like to have is an automatic change in color to highlight the anchor corresponding to the section actually browsed in the page.

I guess that is more than just CSS, or ?

Thanks and kind regards!
Maikol

Attachments:

You must be logged in to view attached files.

[maikol]

Excellent, thanks a lot David !

Hadn’t seen that Raw HTML asset.

Cheers
M

[maikol]

This reply has been marked as private.

[maikol]

here you go : http://dev.comment-creer-un-site-internet.net/test/

Yes I did use the “text only” view in the editor.

Thanks again!

[maikol]

Thanks for your answer !

I tried just that, copying this html code to the text editor in a text module and added the smooth scroll class :

<div class="spb_content_element spb_image_banner col-sm-12"><div class="spb-asset-content"><div class="sf-image-banner "><figure class="animated-overlay"><a class="sf-image-banner-link smooth-scroll-link" href="#intro" target="_self"></a><div class="image-banner-content sf-animation content-center text-center" data-animation="bounceInDown" data-delay="200"><i class="fa-angle-double-down sf-icon sf-icon-float-none sf-icon-large" style="color:#eabe12;"></i></div><div class="img-wrap"><img width="530" height="530" src="http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1.jpg" class="attachment-full size-full" alt="fondations-brut-1" srcset="http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1.jpg 530w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-150x150.jpg 150w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-300x300.jpg 300w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-428x428.jpg 428w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-250x250.jpg 250w" sizes="(max-width: 530px) 100vw, 530px" /></div><figcaption></figcaption></figure></div></div></div>

But this doesn’t work, as the editor somehow removed parts of it when I saved the page. This is what’s left there afterwards :

<div class="spb_content_element spb_image_banner col-sm-12">
<div class="spb-asset-content">
<div class="sf-image-banner "><figure class="animated-overlay">
<div class="image-banner-content sf-animation content-center text-center" data-animation="bounceInDown" data-delay="200"></div>
<div class="img-wrap"><img class="attachment-full size-full" src="http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1.jpg" sizes="(max-width: 530px) 100vw, 530px" srcset="http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1.jpg 530w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-150x150.jpg 150w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-300x300.jpg 300w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-428x428.jpg 428w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-250x250.jpg 250w" alt="fondations-brut-1" width="530" height="530" /></div>
<figcaption></figcaption></figure></div>
</div>
</div>

As you can see the whole link part is just gone !

I’ve tried including the <row> markups and various other combinations, but haven’t had any luck with it.

[maikol]

Hi,

I’m trying to achieve exactly the same thing, but cannot get it to work with the method you indicated.

The HTML I copied, pasted in a text module and modified looks like this :

[spb_image_banner image="14719" image_size="full" content_pos="center" content_textalign="center" animation="bounceInDown" animation_delay="200" image_link="#choisir_son_hebergeur" el_class="smooth-scroll-link" link_target="_self" width="1/1" el_position="first last"]

[icon image="fa-angle-double-down" character="" size="large" cont="no" float="none" color="#eabe12"]

[/spb_image_banner]

But what this does is add the extra class only to the content element div, which doesn’t appear to work for smooth scroll.

So I guess I did something wrong ?

Thanks,
Maikol

[maikol]

Hi again,

Don’t know what happened, but it is now working! :-/

Thanks and all the best !

M