New bie want to insert navigation, please help

New Here ,
Jul 07, 2021 Jul 07, 2021

Copy link to clipboard

Copied

I m trying to insert a navigation code to a template with the following codes

the template codes from https://templatemo.com/tm-561-purple-buzz

 

<section class="container overflow-hidden py-5">
<div class="row gx-5 gx-sm-3 gx-lg-5 gy-lg-5 gy-3 pb-3 projects">

<!-- Start Recent Work -->
<div class="col-xl-3 col-md-4 col-sm-6 project ui branding">
<a href="#" class="service-work card border-0 text-white shadow-sm overflow-hidden mx-5 m-sm-0">
<img class="service card-img" src="./assets/img/services-01.jpg" alt="Card image">
<div class="service-work-vertical card-img-overlay d-flex align-items-end">
<div class="service-work-content text-left text-light">
<span class="btn btn-outline-light rounded-pill mb-lg-3 px-lg-4 light-300">Lampu Teras Otomatis</span>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing</p>
</div>
</div>
</a>
</div><!-- End Recent Work -->

 

I d like to insert the following navigation inside the block,

href="page_project_tutorial.html">Workshop_1</a>

so when the button is pushed, the code run to page_project_tutorial.html

 

please help

 

thank you in advance

kurnia brahmana

 

TOPICS
Code , How to

Views

61

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Jul 07, 2021 Jul 07, 2021

I'm not sure to understand where you want to add the link... is it in the snippet relative to Start Recent Work

or is it in the link that you point at ... https://templatemo.com/tm-561-purple-buzz

 

if it is in the template navigation

open the HTML code of the template...

 

search for the following HTML

 

<div class="tm-menu">
  <a href="/page/1">Free Templates</a>
  <a href="https://www.tooplate.com" rel="sponsored">HTML Templates</a>
  <a href="/links">Links</a>
  <a href="/contact">Contact</a
...

Likes

Translate

Translate
Adobe Community Professional ,
Jul 07, 2021 Jul 07, 2021

Copy link to clipboard

Copied

I'm not sure to understand where you want to add the link... is it in the snippet relative to Start Recent Work

or is it in the link that you point at ... https://templatemo.com/tm-561-purple-buzz

 

if it is in the template navigation

open the HTML code of the template...

 

search for the following HTML

 

<div class="tm-menu">
  <a href="/page/1">Free Templates</a>
  <a href="https://www.tooplate.com" rel="sponsored">HTML Templates</a>
  <a href="/links">Links</a>
  <a href="/contact">Contact</a>
</div>

 

and simply add your new link

<div class="tm-menu">
  <a href="/page/1">Free Templates</a>
  <a href="https://www.tooplate.com" rel="sponsored">HTML Templates</a>
  <a href="/links">Links</a>
  <a href="/contact">Contact</a>
  <a href="/page_project_tutorial.html">Workshop_1</a>
</div>

but be aware that in that case that do mean, that your page page_project_tutorial.hml is located at the root folde. If your page is inside a folder called 'foo', the href attribut should be equal to /foo/page_project_tutorial.hml

 

now if you want to add the same link inside the Start Recent Work bloc, you will have to

first replace the # (third line) by the link itself...

second the "Lorem ipsum dolor sit amet, consectetur adipisicing" sentance (fifth line before the end) by "Workshop_1"

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 07, 2021 Jul 07, 2021

Copy link to clipboard

Copied

That XHTML Template is woefully outdated.  I wouldn't use it.  We use HTML5 doc types now.

 

I recommend you create a new layout in Dreamweaver CC with a built-in Bootstrap Starter Template.

 

1. Define your local site folder by going to Site > New site...  Example, C:\myTestSite\

 

2. Go to File > New > Starter Templates > Bootstrap Templates.  Select a layout and hit the Create button.  See Screenshots.

 

File > New > Starter TemplatesFile > New > Starter Templates

 

After saving, Dreamweaver will create assets folder for you in your local site folder (MyTestSite).

 

Files Panel (F8), Local SiteFiles Panel (F8), Local Site

 

Hope that helps.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 07, 2021 Jul 07, 2021

Copy link to clipboard

Copied

LATEST

Hi, its morning here at the moment,

 

thank you very much for your kind attention, and helped me to solve my problem.

 

The code from noth of you Birnou and Nancy OShea, solved the problem, but I prefer to use Birnou's code,

because I can use the template, even it is very old but don't need to rewrite.

 

Any way, thank you so much.

kurnia brahmana

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines