Skip to main content
C
crazycomputerman_two
Participant
May 6, 2020
Question

Changing the Navigation Bar Position to fixed

  • May 6, 2020
  • 4 replies
  • 2470 views

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 

This topic has been closed for replies.

4 replies

O
osgood_
Legend
May 6, 2020

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>

 

 

 

 

 

 

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    May 6, 2020

     

    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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      hans-g.
      hans-g.
      Legend
      May 6, 2020

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

      hans-g.
      hans-g.
      Legend
      May 6, 2020

      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

        Nancy OShea
        Community Expert
        Nancy OSheaCommunity Expert
        Community Expert
        May 6, 2020

        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
          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices