Navigation  Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
4 posters

    Navigation

    Sir Chivas™
    Sir Chivas™
    Helper
    Helper


    Male Posts : 6983
    Reputation : 457
    Language : EN, FR, ES
    Location : || CSS || HTML || Graphics Designs || Support ||

    Solved Navigation

    Post by Sir Chivas™ February 28th 2024, 6:22 pm

    I've looked everywhere but I can't even find where they have the generated navbar. I'm trying to remove and edit them.

    https://sirchivas.forumotion.com/
    AwesomeBB

    The css and javascript that I found here didn't work to remove them. ex. "groups, calendar."


    Last edited by Sir Chivas™ on February 29th 2024, 12:47 am; edited 1 time in total
    Razor12345
    Razor12345
    Support Moderator
    Support Moderator


    Male Posts : 1477
    Reputation : 262
    Language : Ukr, Rus, Eng
    Location : Ukraine

    Solved Re: Navigation

    Post by Razor12345 February 28th 2024, 7:16 pm

    Good evening!

    AP - Display - Colors&CSS - CSS Stylesheet

    Code:
    #main-menu a[href="/calendar"], #main-menu a[href="/groups"] {
        display: none !important;
    }

    Result:

    Navigation  Scree747



    Navigation  Screen51
    Sir Chivas™
    Sir Chivas™
    Helper
    Helper


    Male Posts : 6983
    Reputation : 457
    Language : EN, FR, ES
    Location : || CSS || HTML || Graphics Designs || Support ||

    Solved Re: Navigation

    Post by Sir Chivas™ February 28th 2024, 7:27 pm

    Ah, I kept putting: (code works perfectly)

    #main-menu ul a[href="/calendar"]


    And if I'd like to add a new navigation link?
    Razor12345
    Razor12345
    Support Moderator
    Support Moderator


    Male Posts : 1477
    Reputation : 262
    Language : Ukr, Rus, Eng
    Location : Ukraine

    Solved Re: Navigation

    Post by Razor12345 February 28th 2024, 8:15 pm

    AP - Modules - Javascript code management - Create new Javascript

    Title: any
    Placement: In all the pages
    Code:

    Code:
    $(function() {
      const menuButton = document.querySelector('#main-menu-btn');
      menuButton.addEventListener('click', function() {
        const extraLink = document.querySelector('.extra_link');
        const isOpenMenu = document.querySelector('#main-menu div.divider + ul');
        if (isOpenMenu && !extraLink) {
         isOpenMenu.insertAdjacentHTML('beforeend', '<li class="extra_link"><a href="/"><span>Extra link<span></a></li>');
        }
      });
    });

    In this code:

    Code:
    const menuButton = document.querySelector('#main-menu-btn');
    - button that opens the navigation menu

    Code:
    const extraLink = document.querySelector('.extra_link');
    - code that looks for additional links in the navigation menu. If these links are found, the code will not allow these links to be inserted into the navigation menu again.

    Code:
    const isOpenMenu = document.querySelector('#main-menu div.divider + ul');
    - the place where the navigation buttons are inserted

    Code:
    isOpenMenu.insertAdjacentHTML('beforeend', '<li class="extra_link"><a href="/"><span>Extra link<span></a></li>');
    - code that inserts the HTML markup of our links. If you need to insert more than one link in the navigation menu, use the following code as an example:
    Code:
    isOpenMenu.insertAdjacentHTML('beforeend', '<li class="extra_link"><a href="/"><span>Extra link<span></a></li><li class="extra_link"><a href="/"><span>Extra link 2<span></a></li>');

    Using this HTML markup of link will preserve the default link style in the navigation menu.

    Result:

    Navigation  Scree749



    Navigation  Screen51
    Sir Chivas™
    Sir Chivas™
    Helper
    Helper


    Male Posts : 6983
    Reputation : 457
    Language : EN, FR, ES
    Location : || CSS || HTML || Graphics Designs || Support ||

    Solved Re: Navigation

    Post by Sir Chivas™ February 28th 2024, 8:29 pm

    Thank you for your help and time to actually explain how the Script works. Ever think about open a teaching class of JS here at FM? Razz

    Ape and Razor12345 like this post

    Ape
    Ape
    Administrator
    Administrator


    Male Posts : 19150
    Reputation : 1994
    Language : fluent in dork / mumbojumbo & English haha

    Solved Re: Navigation

    Post by Ape February 28th 2024, 11:54 pm

    Hi is this now solved ?



    Navigation  Left1212Navigation  Center11Navigation  Right112
    Navigation  Ape_b110
    Navigation  Ape1010
    Sir Chivas™
    Sir Chivas™
    Helper
    Helper


    Male Posts : 6983
    Reputation : 457
    Language : EN, FR, ES
    Location : || CSS || HTML || Graphics Designs || Support ||

    Solved Re: Navigation

    Post by Sir Chivas™ February 29th 2024, 12:47 am

    Yeah, Ape. Sorry, I thought I had clicked on the solved button. Rolling Eyes
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51506
    Reputation : 3519
    Language : English
    Location : United States

    Solved Re: Navigation

    Post by SLGray February 29th 2024, 1:08 am

    Problem solved & topic archived.
    Please read our forum rules:  ESF General Rules



    Navigation  Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.