New sites with Blocs 3.4.2 and Volt CMS

Hi @KBConcepts

You are very welcome.

Hi Pete @PeteSharp

Thanks for you comments.

Indeed, the jewel designer site is at itā€™s very early stage. Though have already done quite some changes so far and have been uploading the site more than once so it may be one of the reasons for the loading issue.

The site should be must faster now, and less white space for mobile devices. Tomorrow Iā€™ll be checking the mobile devices layout ā€œagainā€ with a fresher mindset.

Have you seen the other site ? Strangely no one has really commented on that oneā€¦ except @KBConcepts

Good night

MDS

Hey @MDS,

Yes, I was waiting for the English version (there is a lot going on) . :wink:

Im going to borrow your use of the animated gradient on the copyright bloc, for some site in the future.

Are you going to have a scroll to sticky for the second nav bar? So it doesnā€™t jump up.

For the scroll to sticky you can do something like this, although you probably already have your own solutions (this is from my own site)

Header

<!-- Navigation Sticky and Smooth Fix -->
<style>
.sticky-bar
{
position: fixed;
top: 0;
z-index: 1000;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
transition: all .2s ease-out;
}
.sticky-bar + .content {
  padding-top: 80px;
}
</style>
<!-- Navigation Sticky and Smooth Fix END -->

And the footer

<!-- Toggle Sticky for Navigation -->
<script>
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("topnav");
var sticky = navbar.offsetTop -3;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky-bar");
  } else {
    navbar.classList.remove("sticky-bar");
  }
}
</script>
<!-- Toggle Sticky for Navigation END -->
1 Like

Gā€™day Pete @PeteSharp

The English version wonā€™t be available until end of next week. Meeting with my client to finalise the French version next Thursday. Then Iā€™ll being the ā€œcopy/pasteā€ and translations.

Thank you for your constructive comment (rare these days) and for sharing your solution with providing the piece of code.

Have already tried but did not get it to work. Will work on that later in the day.

As for the gradient, here is the code I use:

.bc-gradient {
	width: 100%;
	height: 100px;
	color: #fff;
	background: linear-gradient(-45deg, #0c67c2, #5494d4, #09529b, #3c85ce);
	background-size: 400% 400%;
	-webkit-animation: Gradient 5s ease infinite;
	-moz-animation: Gradient 5s ease infinite;
	animation: Gradient 5s ease infinite;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

Cheers,
MDS

1 Like

hi, I wasnā€™t aware that the site is still in development, so obviously I was looking at it with much more critical eyes. If you want any comments once itā€™s finished Iā€™ll be happy to look over it again.

Again I should add, I donā€™t consider myself a design expert, I just have strong opinions.

Hi @SteveB

No problem.

Although it was mentioned that the sites were not completed in my first post, people tend to skip that info including myself on other postsā€¦

Everyone has its own likings and tastes. That said you might be happy to note that I have taken into consideration some of your comments and have made changes already.

For the jewel site, I believe it is fine now although a work still in progress.

I am really looking for comments on the other site which does not seem to trigger many so far although Pete @PeteSharp has provide some piece of code I am working on right now.

Cheers,

MDS

I think it should be straight forward for you to modify for your site, but if you want a hand let me know.

Hard to tell, but I think Iā€™m still seeing the old version.

Final comment from me is on the menu. I still feel you have readability issues once it scrolls. The heavy drop shadow gives the impression of a rendering issue with the font and depending on the background colour that is coming thru the blurred menu background, the menu items can be hard to read.

Have tried several modifications but no luck still jumpingā€¦

Would not be surprised I forgot something obvious. If you want you can take a look at the page: https://mds-test.ch/le-club/

Cheers,
MDS

@MDS Iā€™m on a device at the moment. But Iā€™m assuming you changed the targeted ID from topnav to what ever the ID is for you navigation bloc is?

Yes of course, if topnav is supposed to be my secondary menu which ID is bloc-menu-int1.

1 Like

Might want to check the sticky class is being added to the ID when scrolled. Thatā€™s probably the first thing to check.

Well I have tried many different options and so far just cannot get it to work properly. As of today, I give up.

Has not always been the case: :wink:

Menu%20Scroll%20Ease

MDS

1 Like

Hey @MDS, Did you remove the sticky you applied in blocs? The tick box.

Yep tried all possible options.

However I do not believe this piece of code is the right one.

Indeed, the secondary menu is to be visible with the main menu on page load. Then the main menu disappears to have onlythe secondary menu visible, which has been the case before I uploaded changes.

The issue as I understood you felt needed to be corrected ( I do agree) was that the secondary menu would jump to hide the main menu on scroll instead of a smooth transition.

However this coding eases the secondary menu after it has jumped ti appear again smoothly after the sticky main menu. Not exactly what I expected but may be or surely because I did not get it right.

Will try tomorrow with a clean slate.

The basics of the code is correct, it just needs to be tweaked for your site. This part of the CSS

.sticky-bar + .content {
  padding-top: 80px;
}

Just extends padding to the content when the sticky-bar class exists to stop the jumping effect for example.

Yep but it does not work. I believe it may be due to the fact that I have 2 sticky navigations.

Cannot do it now but will post a screen recording later

Hey @MDS, Yeah I was just looking at this page

https://mds-test.ch/le-club/

If I remove the sticky-nav class off both navigations it works. How be it with a large padding at the top, but thatā€™s the CSS. I have linked a video with it working and the CSS fix.

Sticky Fix Video

1 Like

Thanks for your time and video.

I have just re-uploaded the site removing the sticky from the main menu (had already removed the one from the secondary) and tested different options. However, now if you look (although does not happen on video and I presume itā€™s because were tweaking and not really modifying) the fact of having removed the sticky from the main menu it no longer appearsā€¦

Or I am just too tired to figure out what I might being doing wrongā€¦

Let me know if there is something wrong.

Thanks

MDS

Have a nap lol