Rectangle 27 1

style="overflow-y: hidden;"
ul

The ul element inherits it's height from the navbar class. Setting an overflow: hidden on the ul element causes anything that is to be displayed outside the height defined by the navbar class to be hidden.

I was about to ask why this was downvoted, considering the fact that this works, but @Jhawins explained the reason for the downvote. Thank you for the help, but a small explanation would definitely help :)

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

html - Simple twitter bootstrap navbar dropdown doesn't show the dropd...

html css twitter-bootstrap
Rectangle 27 1

That's the default hover state of Bootstrap:

.nav>li>a:focus, .nav>li>a:hover {
  text-decoration: none;
  background-color: #eee;
}

You already have a selector that can override this, just include the background property:

#header a:hover {
  color: #fff;
  text-decoration: none;
  background:none;
}

html - Bootstrap 3 Navbar - When hovering a link, color shows up as #E...

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 1

You are using bootstrap 3 markup and linking to bootstrap 4 css either link to bootstrap 3's css and javascript like so:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">
    <img alt="logo" src="logo.png" width="250px;">
  </a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Build</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>

This works! Did not know I was on a different bootstrap. Thanks!

html - Collapsed Navbar only showing on small screen size bootstrap - ...

html css twitter-bootstrap
Rectangle 27 0

That's the default hover state of Bootstrap:

.nav>li>a:focus, .nav>li>a:hover {
  text-decoration: none;
  background-color: #eee;
}

You already have a selector that can override this, just include the background property:

#header a:hover {
  color: #fff;
  text-decoration: none;
  background:none;
}

html - Bootstrap 3 Navbar - When hovering a link, color shows up as #E...

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 0

ul.nav a:hover { color: #fff !important; }

html - Bootstrap 3 Navbar - When hovering a link, color shows up as #E...

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 0

With these you can give the navbar a class of visible-xs which would only show up on devices with a resolution less than 768px.

Thank you for the quick reply, thats super helpful. When I use that it makes my side bar disappear on those resolutions as well, this is because its under the top navbar div obviously. How do I go about putting the sidebar outside of that div and have it work still?

html - Only show Bootstrap navbar on mobile. - Stack Overflow

html css twitter-bootstrap navbar
Rectangle 27 0

Hmmm okay I'm going to take a swing let me know if it's wrong so I can get what you want but if you just add:

.navbar-collapse{
    max-height: 100%;
}

The collapsed navbar will go the full width so they will all show. From that point it would just be a matter of adjusting the font if you want them all on the same screen or adjusting the line-height. Anyway here is a fiddle for an example give me some feedback so I can help.

html - Twitter bootstrap 3 navbar dropdown doesn't show all elements i...

html css twitter-bootstrap
Rectangle 27 0

<a id="sh" style="cursor:pointer">Show Home</a>
<div id="home" style="display: none;">Test Data</div>

<script type="text\javascript">
$(document).ready(function () {
    $("#sh").click(function () {
        $("#home").toggle();
    });
});
</script>

jQuery isn't tagged in the question, also the question isn't how to toggle elements. The question is "am I doing something wrong or can someone point me in the right direction" so correcting the existing source code would be the correct answer.

since the function would be used for multiple elements, you might want to think of using a class. Just a tip for next time or for your own use. Here's a quick example jsfiddle.net/485fzt0j Its better than having to add the .click() for each element.

javascript - How to show div content in HTML when using BootStrap 3 na...

javascript html bootstrap
Rectangle 27 0

You need to display the .navbar-header button on medium and large screen. So change

@media (min-width: 768px)
{
    .navbar-toggle {
        display: none;
    }

    .navbar-header button {
        display: block;
    }
}

That shows the collapsed navbar for all screens. I just want it so that a normal nav bar appears (fixed to the right) and then as it reaches small screens to appear as a collapsed navbar

See the updated OP please

html - Collapsed Navbar only showing on small screen size bootstrap - ...

html css twitter-bootstrap
Rectangle 27 0

I removed the style="overflow-y: hidden;" I'm not sure why that was there in the first place.

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse" style="padding: 0;">
      <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Teams <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
            </ul>
        </li>
      </ul>
    </div><!--/.navbar-collapse -->
  </div>
</nav>

html - Simple twitter bootstrap navbar dropdown doesn't show the dropd...

html css twitter-bootstrap
Rectangle 27 0

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>

<body>
    <nav class="navbar">
        <div class="container">


<a class="navbar-brand" href="index.php">Shubhsoft</a>

    <div class="navbar-header navbar-right">
        <ul class="nav navbar-nav">
            <li><a href="index.php">Home</a></li>
            <li><a href="index.php">Project</a></li>
            <li><a href="index.php">Client</a></li>
            <li><a href="index.php">Services</a></li>
            <li><a href="index.php">Contact-Us</a></li>
            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Wom Dropdown<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="index.php">Link1</a></li>
                    <li><a href="#">Link1</a></li>
                    <li><a href="#">Link1</a></li>
                    <li class="divider"></li>
                    <li <a href="#">Seperated link</a></li>
                    <li class="divider"></li>
                    <li <a href="#"> one more Seperated link</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>
<script type="text/javascript" href="js/bootstrap.min.js"></script>
<script type="text/javascript" href="js/jquery.js"></script>

Thanks, but this puts the logo on the left and the navbar menu items on the right - I know how to do this but would really like it as mentioned - central navbar with logo centred inside it. Thanks for your suggestion though

upload a screenshot what u wanna

i.stack.imgur.com/DpZ8I.png this is what I want and have BUT the problems as listed above mean on collapse the menu items show horizontally with logo in the toggle menu.

I have read this and tried methods from this question (some bits are still there) but it isnt working for me

html - Showing collapsed Menu Items vertically with centred navbar and...

html css twitter-bootstrap mobile navbar
Rectangle 27 0

ul.nav a:hover { color: #fff !important; }

html - Bootstrap 3 Navbar - When hovering a link, color shows up as #E...

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 0

.navbar-collapse.collapse {
    display: none !important;
}

html - Collapsed Bootstrap Navbar Not Showing - Stack Overflow

html css twitter-bootstrap
Rectangle 27 0

You don't currently have the toggle button in your code. Try placing the following before your collapse, and after your navbar-header:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

don't link w3scools, not a good reference site

html - Bootstrap navbar collapse button not showing - Stack Overflow

html css twitter-bootstrap
Rectangle 27 0

By using overflow-y: hidden, you're telling the browser to hide anything that goes beyond the height of the element, and if necessary, show a horizontal scrollbar. In this case, clicking on the dropmenu shows the menu, but the dropmenu's width is larger than the Teams element. If you remove that, then the dropmenu in tablet/desktop views will appear correctly.

In the mobile view, padding: 0 causes the horizontal scrollbar to appear. Bootstrap's grid system works with negative margins, with equally positive paddings. By changing the left and right padding from 15px to 0, you're negating the offset of the left and right margin of -15px, causing horizontal scrollbars.

Removing both padding: 0 and overflow-y: hidden will result in the menu behaving just like Bootstrap intended. If you're trying to accomplish something other than what Bootstrap has designed, that fact hasn't been made that clear.

No idea why this is downvoted as it identifies why the scrollbars appear in the various viewing styles.

html - Simple twitter bootstrap navbar dropdown doesn't show the dropd...

html css twitter-bootstrap
Rectangle 27 0

You need to get rid of the "navbar-inverse" class. Here is a fiddle: http://www.bootply.com/124086

<div id="navbar" class="navbar navbar-fixed-top">
<nav>
    <ul class="nav nav-stacked" id="menu-bar">
        <li><img src="#"></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
</div>

html - Bootstrap: navbar showing a line - Stack Overflow

html css twitter-bootstrap navbar
Rectangle 27 0

thats working fine but anchor color is same as background , You must use class for this and change color with media screen or let the default bootstrap color on mobile (gray)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  .navbar-default {
    z-index: 1;
    background-color: #062F4F;
    border-color: #062F4F;
}
/* title */
.navbar-default .navbar-brand {
    color: #FFFFFF;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #813772;
}
/* link */
.navbar-default .navbar-nav > li > a {
    color: #FFFFFF;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #813772;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: #FFFFFF;
    background-color: #813772;
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: #FFFFFF;
    background-color: #062F4F;
}
/* caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #000000;
    border-bottom-color: #000000;
}
.navbar-default .navbar-nav  .pinkBackground>li>a {
    color:#062F4F ;
}

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;

    }

    .navbar .navbar-collapse {
        text-align: center;
    }
}

 </style>
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="900">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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" href="Son Of The Right Hand v.0.html#postWelcome">Son of the Right Hand</a>
    </div>


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active" id="home"><a href="Son Of The Right Hand v.0.html#postWelcome">Home <span class="sr-only">(current)</span></a></li>
        <li><a href="#">What is tSotRH?</a></li>
        <li><a href="#">About Me</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Streams <span class="caret"></span></a>
          <ul class="dropdown-menu pinkBackground">
            <li><a href="#">Stream 1</a></li>
            <li><a href="#">Stream 2</a></li>
            <li><a  href="#">Stream 3</a></li>
          </ul>
        </li>
      </ul>


    </div>
</nav>

In case like that You must inspect element before posting question !

html - Bootstrap navbar dropdown menu buttons not showing when navbar ...

html css twitter-bootstrap drop-down-menu navbar
Rectangle 27 0

With these you can give the navbar a class of visible-xs which would only show up on devices with a resolution less than 768px.

Thank you for the quick reply, thats super helpful. When I use that it makes my side bar disappear on those resolutions as well, this is because its under the top navbar div obviously. How do I go about putting the sidebar outside of that div and have it work still?

html - Only show Bootstrap navbar on mobile. - Stack Overflow

html css twitter-bootstrap navbar
Rectangle 27 0

style="overflow-y: hidden;"
ul

The ul element inherits it's height from the navbar class. Setting an overflow: hidden on the ul element causes anything that is to be displayed outside the height defined by the navbar class to be hidden.

I was about to ask why this was downvoted, considering the fact that this works, but @Jhawins explained the reason for the downvote. Thank you for the help, but a small explanation would definitely help :)

html - Simple twitter bootstrap navbar dropdown doesn't show the dropd...

html css twitter-bootstrap