PAGES FLORENT
Registered User
14 posts
My last one : https://opengym.fr/
John Ferguson
Registered User
148 posts
PAGES FLORENT wrote:
My last one : https://opengym.fr/
My last one : https://opengym.fr/
Very nice looking site! Well done.
John Ferguson
Website Design and Development
www.jf1.co
Website Design and Development
www.jf1.co
Chris
Registered User
97 posts
My latest website using, Site Designer V3, WebForm Builder and Responsive Content Slider. Any feedback or comments would be appreciated:
http://instrulec.com/
http://instrulec.com/
Phil Dias
Registered User
260 posts
Twinstream wrote:
Yes, that about it.
<nav class="container" id="sub-nav" data-toggler=".expanded">
<script>
$('#burgerx').click(function() {
$("i", this).toggleClass("coffeecup-icons-cross2 coffeecup-icons-menu7");
});
$(window).resize(function() {
if (($(window).width() >= 640) && $('#sub-nav').hasClass('expanded')) {
$('#burgerx >i').toggleClass("coffeecup-icons-cross2 coffeecup-icons-menu7");
$('#sub-nav').removeClass('expanded');
}
});
</script>
I do not know what your breakpoint is for mobile to desktop so you may have to change the bold setting in the script.
Phil Dias wrote:
Hi Twinstream. Thank you for your kind comments.
I've just had a look and turned my phone and see what you mean.
I'll try and work it out but I have done a lot of work in a html editor so a lot of changes are without the SD3 program so am reluctant to go into the SD3 program again. Is it a case of adding the toggler attribute to the sub-nav ID and replacing the script?
Regards Phil
Hi Twinstream. Thank you for your kind comments.
I've just had a look and turned my phone and see what you mean.
I'll try and work it out but I have done a lot of work in a html editor so a lot of changes are without the SD3 program so am reluctant to go into the SD3 program again. Is it a case of adding the toggler attribute to the sub-nav ID and replacing the script?
Regards Phil
Yes, that about it.
<nav class="container" id="sub-nav" data-toggler=".expanded">
<script>
$('#burgerx').click(function() {
$("i", this).toggleClass("coffeecup-icons-cross2 coffeecup-icons-menu7");
});
$(window).resize(function() {
if (($(window).width() >= 640) && $('#sub-nav').hasClass('expanded')) {
$('#burgerx >i').toggleClass("coffeecup-icons-cross2 coffeecup-icons-menu7");
$('#sub-nav').removeClass('expanded');
}
});
</script>
I do not know what your breakpoint is for mobile to desktop so you may have to change the bold setting in the script.
Hi Twinstream. I am using this code for another website I am creating but using font awesome fonts the resizing of the window element doesn't seem to work and restore original burger icon?
Any clues?
Kind regards Phil
adrian horn
Registered User
279 posts
Hi Chris
Very Nice and clean site great photographs in the slider the only thing is and this is so tiny i mention this out of my own personal taste is that the slider needs to let you see the shots for 2 or 3 seconds more. as i say that is just my taste other than that you have made a brilliant site well done
Regards Adrian
Very Nice and clean site great photographs in the slider the only thing is and this is so tiny i mention this out of my own personal taste is that the slider needs to let you see the shots for 2 or 3 seconds more. as i say that is just my taste other than that you have made a brilliant site well done
Regards Adrian
Twinstream
Registered User
811 posts
Phil Dias wrote:
Hi Twinstream. I am using this code for another website I am creating but using font awesome fonts the resizing of the window element doesn't seem to work and restore original burger icon?
Any clues?
Kind regards Phil
Twinstream wrote:
Yes, that about it.
<nav class="container" id="sub-nav" data-toggler=".expanded">
<script>
$('#burgerx').click(function() {
$("i", this).toggleClass("coffeecup-icons-cross2 coffeecup-icons-menu7");
});
$(window).resize(function() {
if (($(window).width() >= 640) && $('#sub-nav').hasClass('expanded')) {
$('#burgerx >i').toggleClass("coffeecup-icons-cross2 coffeecup-icons-menu7");
$('#sub-nav').removeClass('expanded');
}
});
</script>
I do not know what your breakpoint is for mobile to desktop so you may have to change the bold setting in the script.
Phil Dias wrote:
Hi Twinstream. Thank you for your kind comments.
I've just had a look and turned my phone and see what you mean.
I'll try and work it out but I have done a lot of work in a html editor so a lot of changes are without the SD3 program so am reluctant to go into the SD3 program again. Is it a case of adding the toggler attribute to the sub-nav ID and replacing the script?
Regards Phil
Hi Twinstream. Thank you for your kind comments.
I've just had a look and turned my phone and see what you mean.
I'll try and work it out but I have done a lot of work in a html editor so a lot of changes are without the SD3 program so am reluctant to go into the SD3 program again. Is it a case of adding the toggler attribute to the sub-nav ID and replacing the script?
Regards Phil
Yes, that about it.
<nav class="container" id="sub-nav" data-toggler=".expanded">
<script>
$('#burgerx').click(function() {
$("i", this).toggleClass("coffeecup-icons-cross2 coffeecup-icons-menu7");
});
$(window).resize(function() {
if (($(window).width() >= 640) && $('#sub-nav').hasClass('expanded')) {
$('#burgerx >i').toggleClass("coffeecup-icons-cross2 coffeecup-icons-menu7");
$('#sub-nav').removeClass('expanded');
}
});
</script>
I do not know what your breakpoint is for mobile to desktop so you may have to change the bold setting in the script.
Hi Twinstream. I am using this code for another website I am creating but using font awesome fonts the resizing of the window element doesn't seem to work and restore original burger icon?
Any clues?
Kind regards Phil
I would need to see the site probably. This situation of targeting the two icons is done by searching for the "i" (for icon) tag within the id #burgerx. You could use two icons and then target each with individual dynamic classes to toggle on and off by setting data-toggler on each.
Bootstrap 5 CSS Grid.
Phil Dias
Registered User
260 posts
Hi Twinstream, the site is
test.phildias.com
The javascript is in
https://test.phildias.com/js/app.js
Kind regards
Phil
test.phildias.com
The javascript is in
https://test.phildias.com/js/app.js
Kind regards
Phil
Twinstream
Registered User
811 posts
Phil Dias wrote:
Hi Twinstream, the site is
test.phildias.com
The javascript is in
https://test.phildias.com/js/app.js
Kind regards
Phil
Hi Twinstream, the site is
test.phildias.com
The javascript is in
https://test.phildias.com/js/app.js
Kind regards
Phil
The links do not seem to be working correctly ? This forum is for New Websites so you might post the troubleshooting question in another area such SDv3 or something else ?
Bootstrap 5 CSS Grid.
Inger
Senior Advisor
14,566 posts
The working URL is https://test.phildias.com/
Phil, it is best to write the complete address, otherwise the browser may think it is a folder under the CC website.
Phil, it is best to write the complete address, otherwise the browser may think it is a folder under the CC website.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Twinstream
Registered User
811 posts
Inger wrote:
The working URL is https://test.phildias.com/
Phil, it is best to write the complete address, otherwise the browser may think it is a folder under the CC website.
The working URL is https://test.phildias.com/
Phil, it is best to write the complete address, otherwise the browser may think it is a folder under the CC website.
Inger, I get this message when trying to load Phils site.
The owner of test.phildias.com has configured their website improperly. To protect your information from being stolen, Firefox has not connected to this website.
Bootstrap 5 CSS Grid.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
