• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Changing the Navigation Bar Position to fixed

New Here ,
May 06, 2020 May 06, 2020

Copy link to clipboard

Copied

Hi Adobe Community 

 

I have the nice navigation bar but realised it turn out annoying as it's free-positon with the <div> box and when i put them on correct position and it turn out that the navigation bar can be moving around in each page for example if you go to http://dspy.co.uk/trial/pastwinners.html and Archives - you can see the navigation bar is moving - Now I realised it's the whole page that moving - Not sure if it's the scripts that I used for slideshow - Can anyone point out why this happening as client want navigation bar to stay the same in all pages. 

 

Also he asked for to be centered - Not sure if this is possible or need a new navigation bar ?

 

Navigation Bar Coding 

 

<header class="header">
<div align="center">
<nav>
<ul>
<li><a href="index.html">Watch</a></li>
<li class="sub-menu">
<a href="#Award2020">Awards 2020</a>
<ul>
<li>
<a href="../Contact-Nomination Form/Nomination Form/index.php" target="_parent">Nomination</a>
</li>
<li><a href="awards2020/ticket.html"> Buy Tickets</a></li>
<li><a href="awards2020/criteriaawards.html"> Criteria Awards</a></li>
<li><a href="awards2020/awardscat.html"> Awards Categories</a></li>
<li><a href="awards2020/venue.html"> Venue</a></li>
<li><a href="awards2020/poster.html"> Poster</a></li>
<li><a href="awards2020/volunteersteam.html"> Meet DSPY Team</a></li>
<li><a href="https://www.clikapad.com/"> Clickapad Voting </a></li>
</ul>
</li>
<li><a href="pastwinners.html" class="active">Past Winners</a></li>
<li><a href="archives.html">Archives</a></li>
<li><a href="sportnetwork.html">Sport Network</a></li>
<li><a href="../Contact-Nomination%20Form/Contact%20Form/index.php">Contact Us</a></li>
</ul>
</nav>
</div>
</header>

 

Many thanks for help in advance

 

Robert 

TOPICS
Code , Error , Interface , Performance , Product issue

Views

2.1K

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
Community Expert ,
May 06, 2020 May 06, 2020

Copy link to clipboard

Copied

The navbar you have on past winners page is called a sticky navbar.  In other words, when you scroll the page down, navbar moves up and sticks to top of browser frame. See link below for details.

https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

 

For consistency, you should use the same menu throughout your site.  Either copy & paste the relevant code or learn to use server-side-includes, described below. 

https://alt-web.blogspot.com/2015/07/server-side-includes-with-php.html

 

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

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
LEGEND ,
May 06, 2020 May 06, 2020

Copy link to clipboard

Copied

Hi Robert,

in some of my websites I use in this cas the so called "includes". Therefore you use only one single file with all your entries. In the different files you point out to this include file.

 

e.g. <?php include("includes/InclMen.php"); ?>

  includes is a directory, where all your file are situated

InclMen.php is (my) include menu file.

 

In this way, all positions for example are the same

 

Hans-Günter

Votes

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
LEGEND ,
May 06, 2020 May 06, 2020

Copy link to clipboard

Copied

... and wht concerns <li><a href="../Contact-Nomination%20Form/Contact%20Form/index.php">Contact Us</a></li>

From my library:

Don't use spaces in folders, filenames and imagenames.
•Spaces get converted %20 which leads to problems.
•You can use underscores or dashes if needed but no spaces.
•Blanks are often not recognised of search engines.

Votes

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
LEGEND ,
May 06, 2020 May 06, 2020

Copy link to clipboard

Copied

I don't know if you can copy and paste but below is your navigation rebuilt from the ground up (see code below, scroll down - works on mobile devices as well.

 

If you choose to use the code then get rid of the following css selector 'container header nav' (see below) in your 'singlePageTemplate.css' file. It's having an adverse effect by creating a horizontal scroll bar on mobile device, not a good approach for a mobile navigation.

 

.container header nav {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 100%;
float: none;
overflow: auto;
display: inline-block;
background: #52bad5;
}

 

1. Copy the <header></header> block of code and replace what you currently have in your page with it.

2. Copy the css into a stylesheet named .main-navigation.css and link it to the page.

3. Copy the <script></script> block of code and paste it directly before the closing </body> tag at the foot of the page.

4. Copy the fontawesome libary link - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> - and insert it in your page along with the other (many duplicated) links to your css files. This will pull in a 'hamburger icon' for mobile devices and a 'down arrow carat' for the sub-menu.

 

You can remove all the references to the old 'header' css styling at the top of your current page plus you can also remove the 'sticky' block of <script></script> at the foot of the page as the new code uses the css 'sticky' property to make the navigation adhere to the top of page.

 

Also I would advise going with an onclick event to show the sub-menu as this works better on mobile devices hence why I have commented out the onhover effect in the new css code. If you want the sub-menu to be evoked onhover then just uncomment it.

 

 

Below is the new code: (You can actually just copy all of it, paste it in a new document to test it out)

 

 

 

<!doctype html>
<html lang="eng">
<head>
<meta charset="utf-8">
<title>Nav Bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.mainHeader {
font-family: Tahoma;
font-size: 20px;
font-weight: 400;
background-color: #2c2adf;
padding: 0;
position: sticky;
z-index: 1000;
top: 0;
}
.mainHeader ul {
display: flex;
justify-content: center;
margin: 0;
padding: 0;
}
.mainHeader ul li {
margin: 0;
padding: 0;
list-style: none;
}
.mainHeader a {
text-decoration: none;
color: #fff;
display: block;
padding: 20px 30px;
transition: all 0.5s ease-in-out;
}
.mainHeader a:hover {
background-color: #003846;
}
.mainHeader .subMenu {
position: relative;
}
.mainHeader .subMenu ul {
display: flex;
flex-direction: column;
position: absolute;
background-color: #003846;
width: 300px;
display: none;
}
/*
.mainHeader .subMenu:hover ul {
display: block;
}
*/
.mainHeader .subMenu li {
border-top: 1px solid #fff;
}
.mainHeader .subMenu ul li a:hover {
position: relative;
color: #028bad;
}
.mobileMenu {
box-sizing: border-box;
display: none;
padding: 20px 30px;
color: #fff;
font-family: Tahoma;
font-size: 20px;
font-weight: 400;
width: 100%;
text-align: right;
cursor: pointer;
}
.displayBlock {
display: block!important;
}


@media (max-width: 1000px) {
.mobileMenu {
display: block;
}
.mainHeader ul {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.mainHeader .subMenu ul {
width: 100%;
position: relative;
}
.mainHeader a {
text-align: left;
border-top: 1px solid #fff;
}
.mainNav {
display: none;
}
.subMenu a:first-child {
display: flex;
justify-content: space-between;	
}
}

.mainNav ul li:nth-child(2) {
background-color: #003846;
}

</style>


<body>


<div style="height: 200px; background-color: #f2f2f2;"></div>
    
    
<header class="mainHeader">
<div class="mobileMenu"><i class="fa fa-bars"></i></div>
<nav class="mainNav">
<ul>
<li><a href="index.html">Watch</a></li>
<li class="subMenu">
<a href="#Award2020">Awards 2020 <i class="fa fa-caret-down"></i></a>
<ul>
<li>
<a href="../Contact-Nomination Form/Nomination Form/index.php" target="_parent">Nomination</a>
</li>
<li><a href="awards2020/ticket.html">Buy Tickets</a></li>
<li><a href="awards2020/criteriaawards.html"> Criteria Awards</a></li>
<li><a href="awards2020/awardscat.html"> Awards Categories</a></li>
<li><a href="awards2020/venue.html"> Venue</a></li>
<li><a href="awards2020/poster.html"> Poster</a></li>
<li><a href="awards2020/volunteersteam.html"> Meet DSPY Team</a></li>
<li><a href="https://www.clikapad.com/"> Clickapad Voting </a></li>
</ul>
</li>
<li><a href="pastwinners.html" class="active">Past Winners</a></li>
<li><a href="archives.html">Archives</a></li>
<li><a href="sportnetwork.html">Sport Network</a></li>
<li><a href="../Contact-Nomination%20Form/Contact%20Form/index.php">Contact Us</a></li>
</ul>
</nav>
</header>
<!-- header -->


<div style="height: 1500px; background-color: #f2f2f2;"></div>


<script>
const mobileMenu = document.querySelector('.mobileMenu');
const mainNav = document.querySelector('.mainNav');
const subMenu = document.querySelector('.subMenu');
const subMenuLinks = document.querySelector('.subMenu ul');
mobileMenu.onclick = function() {
mainNav.classList.toggle('displayBlock');
}
subMenu.onclick = function() {
subMenuLinks.classList.toggle('displayBlock');	
}
</script>
</body>

</html>

 

 

 

 

 

 

Votes

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
Community Expert ,
May 06, 2020 May 06, 2020

Copy link to clipboard

Copied

LATEST

BenPleysier_0-1588803577763.png

 

This is great osgood_, why not create a Dreamweaver extension so that we don't have to come here to copy and paste the code. 

Wappler, the only real Dreamweaver alternative.

Votes

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