I have a navigation bar ,
current url : www.domain/what-is-your-fb-username-?/

 <nav class="navbar navbar-inverse navbar-fixed-top">
     <div class="container-fluid">
         <div class="navbar-header">
             <a class="navbar-brand" href="">Shuboy2014</a>
         </div>
       <ul class="nav navbar-nav">
           <li class="active"><a href='delete/'>Delete</a></li>
           <li class="active"><a href="edit/">Update</a></li>
           <li class="active"><a href="logout">Logout</a></li>
       </ul>
     </div>
   </nav>

When I click on logout option on the navigational bar it redirects to www.domain/what-is-your-fb-username-?/logout and I want to go to www.domain/logout .

How can I do this? Any helpful suggestion will be helpful.

I have a navigation bar ,
current url : www.domain./what-is-your-fb-username-?/

 <nav class="navbar navbar-inverse navbar-fixed-top">
     <div class="container-fluid">
         <div class="navbar-header">
             <a class="navbar-brand" href="">Shuboy2014</a>
         </div>
       <ul class="nav navbar-nav">
           <li class="active"><a href='delete/'>Delete</a></li>
           <li class="active"><a href="edit/">Update</a></li>
           <li class="active"><a href="logout">Logout</a></li>
       </ul>
     </div>
   </nav>

When I click on logout option on the navigational bar it redirects to www.domain./what-is-your-fb-username-?/logout and I want to go to www.domain./logout .

How can I do this? Any helpful suggestion will be helpful.

• javascript
• html
• css
• bootstrap-modal

3 Answers 3

You may change the href url of logout:

From: <li class="active"><a href="logout">Logout</a></li>

to: <li class="active"><a href="/logout">Logout</a></li>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://code.jquery./jquery-1.12.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="">Shuboy2014</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href='delete/'>Delete</a></li>
            <li class="active"><a href="edit/">Update</a></li>
            <li class="active"><a href="/logout">Logout</a></li>
        </ul>
    </div>
</nav>

The best way to avoid these kinds of errors is to specify the full path in (all) your links - i.e. http://www.domain./folder/page.html.

You will find that getting into this habit will avoid errors, especially if you refer to external links.

Best of luck!

Simply put a / at the front of the href, eg /logout

Having / in the front makes it a path-absolute url and will be used as the full path part to the current domain.

A path-absolute URL must be "/" followed by a path-relative URL.

You can also use the <base> tag to set the base URL that relative paths will use to make the full url. So if base was http://stackoverflow./ and the current page is at http://stackoverflow./assets all relative urls would start with http://stackoverflow./ and not http://stackoverflow./assests

console.log("Document location:", document.location.href );
console.log("anchor href: ",document.querySelector("a").href);

<base href="http://stacksnippets/">
<a href="assets/test.html">Relative of &lt;base&gt;</a>