Menu – one page website –

Home Forums EZY – Responsive Multi-Purpose HTML5 Template Menu – one page website –

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #10032070
    alexro
    Participant

    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 blue sqare

    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.0
    #10032072
    Support2
    Keymaster

    Hello 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 class dropdown 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.
    #10032074
    alexro
    Participant

    Hi 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 ?!


    pastebin-code

    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


    #10032093
    Support2
    Keymaster

    Hello,

    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/icons

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10032101
    alexro
    Participant

    Hi 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


    #10032107
    alexro
    Participant

    Hey 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


    #10032109
    Support2
    Keymaster

    Hello 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.


    #10032111
    alexro
    Participant

    Rodrigo you are a God my friend ! , how come you know it all ! 🙂

    Thank you so much !, works great

    Alex


Viewing 8 posts - 1 through 8 (of 8 total)

This topic is marked as "RESOLVED" and can not rceive new replies.