Results 1 to 2 of 2

Thread: Lost the dropdown ability

  1. #1

    Unhappy Lost the dropdown ability

    Hi everyone, sorry by my english but I need some help

    I have some application in a hosting server, I am really investigating how use bootstrap, and I did some thing pretty well however i face some strange situation:

    I have an index.php for join header.php + center.php + footer.php, header.php, All them are copied to this structure:

    directoryMain
    + subdirectory-1
    + subdirectory1-1
    + subdirectory1-2
    and so on.

    All references working perfectly in subdirectories, however in the directory doesn't work in any way.

    The header.php (the same code in all subdirectories) has:

    <head>
    <title>Main page</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </head>

    and it is used for call Menus with dropdowns

    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" style="color:#FFD119" href="/directoryMain/">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
    <li>
    <a href="/directoryMain /subdirectory1/" title="WHOR">Who are</a>
    </li>
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="gtt">GTT<b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li>
    <a href="/directoryMain /subdirectory1/subdirectory1-1/"><i class="fa fa-list fa-fw"></i>MD</a>
    </li>
    <li>
    <a href="/directoryMain /subdirectory1/subdirectory1-2/"><i class="fa fa-desktop fa-fw"></i>LP</a>
    </li>
    </ul>
    </li>
    ***

    When the index is called from any of subdirectories everything goes well, dropdown works, however when the index at the directoryMain is called, no dropdown worked, except the not dropdown menu elements (this let me "reset the functionality" to back and use the dropdown in the menus)
    I tested called only to header.php at the main directory and this file only also works!!

    What is wrong, please help I can not understand what I am doing bad.

    Thanks

  2. #2
    Please use the [code] tag when your posting code

    Code:
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    First shouldnt you download the style and the js files so your server wont have to worry about connecting to anything outside your site (Thats what i do atleast) never have had this issue at all also never hurts to download font awesome for some extra glyphicons as for your directories you should really only have;

    Public_HTML (set by webhost where your stuff is)
    - CSS
    - JS
    - Images
    - Template
    - Includes
    - database_handle
    - admin

    Secondly it seems that the the nav is working fine for me;

    Code:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Bootstrap 101 Template</title>
    
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
    	<link href="css/font-awesome.min.css" rel="stylesheet">
    
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
        <div class="row-fluid">
    		<div class="col-md-12">
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button> 
    <a class="navbar-brand" style="color:#FFD119" href="/directoryMain/">Brand</a>
    </div>
    
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
    <li>
    <a href="/directoryMain /subdirectory1/" title="WHOR">Who are</a>
    </li>
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="gtt">GTT<b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li>
    <a href="/directoryMain /subdirectory1/subdirectory1-1/"><i class="fa fa-list fa-fw"></i>MD</a>
    </li>
    <li>
    <a href="/directoryMain /subdirectory1/subdirectory1-2/"><i class="fa fa-desktop fa-fw"></i>LP</a>
    </li>
    </ul>
    </li>
    		<!--closes the col-12 tag-->	
    		</div>
    	<!--closes the row tag-->	
    	</div>
    
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
      </body>
    </html>

    Header.php;
    Code:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Bootstrap 101 Template</title>
    
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
    	<link href="css/font-awesome.min.css" rel="stylesheet">
    
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
    nav.php (center)
    Code:
        <div class="row-fluid">
    		<div class="col-md-12">
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button> 
    <a class="navbar-brand" style="color:#FFD119" href="/directoryMain/">Brand</a>
    </div>
    
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
    <li>
    <a href="/directoryMain /subdirectory1/" title="WHOR">Who are</a>
    </li>
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="gtt">GTT<b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li>
    <a href="/directoryMain /subdirectory1/subdirectory1-1/"><i class="fa fa-list fa-fw"></i>MD</a>
    </li>
    <li>
    <a href="/directoryMain /subdirectory1/subdirectory1-2/"><i class="fa fa-desktop fa-fw"></i>LP</a>
    </li>
    </ul>
    </li>
    		<!--closes the col-12 tag-->	
    		</div>
    	<!--closes the row tag-->	
    	</div>
    footer.php
    Code:
    copyright &copy; 2015 sitename
    index.php
    Code:
    <?php include('template/header.php'); ?>
    <body>
    <?php include('template/nav.php'); ?>
    
    <!-- your content here -->
    
    <?php include ('template/footer.php'); ?>
    </body>
    </html>
    Everything is working fine for me

Tags for this Thread

Posting Permissions

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