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) .
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 -->
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
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.
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:
MDS
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
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.
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