1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

HOW TO CREATE ADD A NEW DROP NAVIGATION LINK

Discussion in 'HTML & Website Design' started by Johnstone, Sep 1, 2023.

0
  1. #1
    Dear colleagues and global Samaritans on this truly magnificent community.

    Im very much a novice to web development and would objectively regard my self
    as a more than ordinary designer and content writer. My passions lie within the content, ( less of and more succint content is always far more appealing. Aesthetics, imagery, typography and the UX of a website visit. Im reading upon these topics and which led me to this universe.

    However on all fronts, I am present facing conundrum!

    How does one add a New Link/clickable banner on the drop down navigation menu, on a one page scroller website. I literally have just inherited the site back from my web developer, and received access to my cPanel. I wish to add and amend the site to my wishes and feel im sorry to say he is not be relied upon! I feel i could design truly breathtaking website, however dont possess the coding acumen to do so!

    Nevertheless, I have gone to file manager and clicked on public; can update content, however do not know how to add a new link to the site. I wish to add additional content, images to my luxury clothing website.

    Any one of you exemplary ladies or gents, whom can advise me further, please don't hesitate to reach out and revert back to this message.

    If I haven't been specific enough? I will do my utmost best to reframe my question, and send again.
    Furthermore I thank you in advance for reading this laborious message on a far less exuberant topic of concern.

    Best of wishes to you all,

    John from London, UK.
     
    Johnstone, Sep 1, 2023 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,641
    Likes Received:
    4,486
    Best Answers:
    123
    Trophy Points:
    665
    #2
    Hi John, the first question I'd have is what css framework (if any) has been used to build the page. While you can start from scratch you can save time by using the standard tools that go with the framework.
     
    sarahk, Sep 2, 2023 IP
  3. Johnstone

    Johnstone Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Hi Sarah and thank you very much for your response, can you please advise from where i can check in what CSS framework it has been made
    on the c panel. It is at present a one page scroller although quite aesthetically luxurious . Where should i check on the cpanel to answer your question.

    Further more on a personal note i have a Somoyed dog and he most certainly keeps me busy, not to mention digs holes in the garden :)
     
    Johnstone, Sep 3, 2023 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    28,641
    Likes Received:
    4,486
    Best Answers:
    123
    Trophy Points:
    665
    #4
    You don't check in cpanel, you need to view the source (right click on the page, choose "view source" from the pop up menu) and look at the CSS scripts that are referenced at the top. You're looking for something like this
    <link id="style" href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    Code (markup):
    In this case it's bootstrap that's being used. If you copy anything that mentions stylesheet or a .css file and paste it in a reply we can let you know if any of them are going to be helpful.
     
    sarahk, Sep 3, 2023 IP
  5. Johnstone

    Johnstone Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    <link href="img/fav-icon.png" rel="shortcut icon" /><!-- Stylesheets -->
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/font-awesome.min.css" rel="stylesheet" />
    <link href="css/owl.carousel.min.css" rel="stylesheet" />
    <link href="css/flaticon.css" rel="stylesheet" />
    <link href="css/magnific-popup.css" rel="stylesheet" /><!-- Main Stylesheets -->
    <link href="css/style.css" rel="stylesheet" />

    1. I believe its also Bootstrap by the looks of it! Should i learn bootstrap in order to edit the current site?
    2. Furthermore I have also designed a new Favicon as well, so i noticed the writing at the top, does one just copy and paste
    the new favicon logo link like the one shown?

    Many thanks for your direction Sarah and for your advice in advance!
     
    Johnstone, Sep 4, 2023 IP
  6. sarahk

    sarahk iTamer Staff

    Messages:
    28,641
    Likes Received:
    4,486
    Best Answers:
    123
    Trophy Points:
    665
    #6
    favicon - yes, just upload it and change that link.

    So, yes, you're using bootstrap. You'll find at the top of the file there will be text like this
    @charset "UTF-8";/*!
* Bootstrap v5.1.3 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    Code (CSS):
    You need to get the version of Bootstrap and then you can go to getbootstrap.com and look up the documentation for your version - specifically Docs | Components | Navbar

    upload_2023-9-5_11-12-15.png
     
    sarahk, Sep 4, 2023 IP
  7. Flowzai

    Flowzai Greenhorn

    Messages:
    37
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    8
    #7
    First, log in to your cPanel and access your website's files. Since you're using a one-page scroller, you'll need to modify the website's HTML code. Find the HTML file that contains your navigation menu, typically called "index.html" or something similar. Once you locate it, open it using a text editor. Look for the section of code that defines your navigation menu. It might look something like this:

    <ul class="menu">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <!-- Add your new link below -->
    <li><a href="#newlink">New Link</a></li>
    <li><a href="#contact">Contact</a></li>
    </ul>

    Simply add a new list item (<li>) with a link (<a>) to your desired page. Replace "#newlink" with the URL or anchor to the content you want to link to. Save the file, and voilà! Your new link should now appear on your dropdown navigation menu. Remember, web development is all about experimenting and learning, so don't be afraid to give it a try.
     
    Flowzai, Oct 31, 2023 IP