www.webdeveloper.com
Results 1 to 11 of 11

Thread: hide navbar in first page

  1. #1
    Join Date
    Jul 2013
    Posts
    57

    hide navbar in first page

    I using this template. Its already has scrolling navbar then fixed at top. its okay. but my problem is, i dont want the navbar appear in first page. in the first page, the navbar appear at the bottom. i want to hide that. for the rest of the webs, the navbar will be stick at top. how to hide the navbar in the first page? this is the code.

    Code:
    <!doctype html>
    <html lang="en-US">
    <head>
    
    	<!-- Meta tags & title /-->
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    	<meta name="robots" content="all,index,follow" />
    
    	<title>GolfView Residence</title>
    	<meta name="description" content="" />
    	
    	<link rel="stylesheet" type="text/css" href="css/style.css" /> <!-- Main stylesheet /-->
    
    </head>
    
    <body>
    
    <section id="screen1">
    
    	<p>Scroll down</p>
    
    	<nav>
    		<ul>
            	<li><img src="images/log.png"></li>
    			<li><a href="#">Home</a></li>
    			<li><a href="#">About</a></li>
    			<li><a href="#">Services</a></li>
    			<li><a href="#">Team</a></li>
    			<li><a href="#">Contact</a></li>
    		</ul>
    	</nav>
    
    </section>
    	
    <section id="screen2"></section>
    <section id="screen3"></section>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    
    <script>
       $(document).ready(function(){
    	   $(window).bind('scroll', function() {
    	   var navHeight = $( window ).height() - 70;
    			 if ($(window).scrollTop() > navHeight) {
    				 $('nav').addClass('fixed');
    			 }
    			 else {
    				 $('nav').removeClass('fixed');
    			 }
    		});
    	});
    </script>
    
    </body>
    </html>
    Code:
    * {margin: 0; padding: 0;}
    
    a {text-decoration: none;}
    
    /* This class is added on scroll */
    .fixed {
    	position: fixed; 
    	top: 0; 
    	height: 100px; 
    	z-index: 1;
    }
    
    body {
    	color: #fff;
    	font-family: 'open-sans-bold'; 
    	font-size: 18px;
    	text-align: center;
    }
    
    /* Font Face Settings */
    @font-face {
        font-family: 'open-sans-bold';
    	src: url('../fonts/open-sans/OpenSans-Bold.eot');
        src: url('../fonts/open-sans/OpenSans-Bold.eot?iefix') format('embedded-opentype'),
    		 url('../fonts/open-sans/OpenSans-Bold.ttf');
        font-weight: normal;
    }	
    
    /* Navigation Settings */
    nav {
    	position: absolute;
    	bottom: 0;
    	width: 100%;
    	height: 100px;
    	background: #fff;
    }
    
    nav li {
    	display: inline-block;
    	padding: 24px 10px;
    }
    
    nav li a {
    	color: #757575;
    	text-transform: uppercase;
    }
    
    section {
    	height: 100vh;
    }
    
    /* Screens Settings */
    #screen1 {	
    	background: #43b29d;
    }
    
    #screen1 p {
    	padding-top: 200px;
    }
    
    #screen2 {
    	background: #efc94d;
    }
    
    #screen3 {
    	background: #e1793d;
    }
    
    @media only screen and (max-width: 520px) {
    
    	nav li {
    		padding: 24px 4px;
    	}
    
    	nav li a {
    		font-size: 14px;
    	}
    
    }

  2. #2
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    For the HTML that you showed, is that for the first page or are all the pages like that? If the first webpage has its own HTML file (or .php, whatever the case may be), then remove the <nav> from there or read the URL, check if it's the first page, then set the <nav> to hidden.

  3. #3
    Join Date
    Jul 2013
    Posts
    57
    that the html file for all pages. what i try to achieved is scrolling then fixed navbar. but i don't want the navbar show in the first page.

  4. #4
    Join Date
    Mar 2012
    Posts
    1,500
    How come the nav bar is appearing in the footer on the first page but not the rest? Answer that and you should know how to make it disappear in the header on the first page.

  5. #5
    Join Date
    Aug 2007
    Posts
    86
    You need to remove the <nav> from the index page and remain same all other pages.

  6. #6
    Join Date
    Jul 2013
    Posts
    57
    what do u mean?

  7. #7
    Join Date
    Mar 2014
    Posts
    40
    Do you use PHP ? a CMS ? or simply HTML ?

  8. #8
    Join Date
    Mar 2014
    Posts
    3

    resolved

    Hi this is solution use JQUERY

    HTML Code:
           <script>
    				var url = window.location.href;
    				var index = url.lastIndexOf("/") + 1;
    				var filename = url.substr(index);
    				if (filename == "index.html") {
    					$("nav").hide() ;
    				};
            </script>
    change index.html with name of your home page

    and it's working with me
    bye .

  9. #9
    Join Date
    Mar 2014
    Posts
    7
    just move the nav tag to the bottom for the index page. you don't need to run any functions.

  10. #10
    Join Date
    Oct 2013
    Location
    3rd planet from the sun
    Posts
    165
    Just add an id to the body on the page you don't want the nav bar showing and then add some css to remove the nav bar.

    Code:
    <body id="home">
    
    #home nav {display:none;}

  11. #11
    Join Date
    Apr 2014
    Posts
    12
    Hello,

    Is this the effect you want to achieve: http://www.creative-tim.com ? If that is it, i will show a full working template that you can use.

    All the best,
    Tim

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles