Home › Forums › EZY – Responsive Multi-Purpose HTML5 Template › Menu – one page website –
- This topic has 7 replies, 2 voices, and was last updated 4 years, 1 month ago by alexro. This post has been viewed 1043 times
-
AuthorPosts
-
February 13, 2020 at 1:20 am #10032070alexroParticipant
Hello again , guys can you please help me with something – so I want to make a one page website – basically when I click on each name of the top menu / Home / etc/ (blue square) to go to a different section in my page – so the idea is to have my top nav act like –
multi-purpose-11.html
second nav – I didn’t want to put a second nav bcz it looks weird – also I might have one item from the top nav to actually open a page not to go to a section of my main page ! – the sticky nav should act the same as main top nav as a click to section on my main page !img with main page – top nav blue square
another thing, is there a class for just one item on the top nav like – Home simple / without the submenu drop down ,to make all simple – I;ve tried to delete some of the staff if it keeps loading the slider , prob I didn’t close something ! is to much staff there 🙂
well this is it ! , hope you guys can give me a hand !
I wish you all a great day !
Alex
- This topic was modified 4 years, 1 month ago by alexro.
Template Version: 1.1.0February 13, 2020 at 6:42 am #10032072Support2KeymasterHello Alex,
1) To make one page menu links you need the attribute
data-hash
. For example with the “Home” item:<a href="#section_id"> HOME <i class="menu-arrow"></i> </a>
*
data-hash-offset
is the distance from top window browser when scroll to section.
*href="#section_id"
is the ID of section you wants scroll to. For example:<section id="section_id">.....</section> or <div id="section_id" class="row">........</div>
also I might have one item from the top nav to actually open a page not to go to a section of my main page !
For it just do not add the
data-hash
attributes on the menu item. Currently in your website the “Home” item works this way.another thing, is there a class for just one item on the top nav like – Home simple / without the submenu drop down ,to make all simple
For example on the “Home” item, just delete the
<ul class="dropdown-menu">......</ul>
and all content inside this same tag. Also remove the classdropdown dropdown-mega
from<li class="dropdown dropdown-mega">
.Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
- This reply was modified 4 years, 1 month ago by Support2.
February 14, 2020 at 3:15 am #10032074alexroParticipantHi there Rodrigo , worked just fine ! thank you – – I only added the section id to every part in the website and works – the only problem I have is on “Current cars available” section the SHOW ALL don’t stay active after I click one of the top nav -Home- About us- etc ! / and the cars pictures don’t show ! only for the first time when u load the page !
here is the test website- and the pastebin for the code , I’m sure is just a simple gimmick but can’t figure it out what is it ! – any ideas ?!
Another small thing – for the social icons on the top – I see they have a class but no href to location of the icons – prob is in the class on some css somewhere – can you please tell me the location of the icons , is not that important but I might change them !
well this is it , I hope I’m done with this site 🙂 , my brother asked me If I can do this site for him and ofc me the idiot I said yes …it’s easzy ! …NOOOT 🙂
thank you Rodrigo ! wish u well
February 14, 2020 at 7:01 am #10032093Support2KeymasterHello,
1) To turn the menu item active on header when scroll to section, add this to
<body>
:<body data-spy="scroll" data-target=".header-nav-main nav" data-offset="150">
2) Add this code below to (js/custom.js) to prevent the “Show all” issue:
$(window).on('hashchange', function(){ var $sort_source = $('.sort-source'), height = $('.sort-destination-loader').height(); setTimeout(function(){ $('.sort-destination-loader').height( height ); $sort_source.find('li').eq(0).find('a').trigger('click'); $('.sort-destination-loader').css({ height: '' }); }, 0); });
3) You can change the icons by class name. We use FontAwesome icons. You can see all possibilities here:
https://fontawesome.com/iconsPlease try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
February 18, 2020 at 5:13 am #10032101alexroParticipantHi there Rodrigo , all worked perfect ! , sry for the late response I was out on weekend
Thank you so much for your time and support,
I wish a great day !
Kind regards ,
Alex
February 19, 2020 at 3:48 am #10032107alexroParticipantHey Rodrigo is there a way to make that nav on mobile to disappear after you click on one section on the nav ! – basically it covers all screen and you have to click X every time you chose to go to a section ! , I know is no point to use that menu atm , prob I will add some there to open a page , but people are crazy when they come across this kinda staff ! 🙂 , If you have any solutions please let me know
Thank you !
Alex
February 19, 2020 at 6:33 am #10032109Support2KeymasterHello Alex,
You can do that with this custom JS:
(js/custom.js):
$('a.dropdown-item').on('click', function(){ $('.header-nav nav').collapse('hide'); $('.header-btn-collapse-nav').removeClass('active'); });
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
February 19, 2020 at 6:47 am #10032111alexroParticipantRodrigo you are a God my friend ! , how come you know it all ! 🙂
Thank you so much !, works great
Alex
-
AuthorPosts
This topic is marked as "RESOLVED" and can not rceive new replies.