CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
s.vlassis
s.vlassis

Reputation: 97

Margin-right from column

I have written this code but I have some issues and questions.

First of all, as you can see in the Pen, the second menu item is "active". For some reason in the Pen only and not when I run the code in my browser there is a gray background. Why is that and how can I be sure that there will be no background in any browser?

Secondly, as you can see in the html I have set the columns to col-md-2 and col-md-10 and as I understand, the content in the col-md-2 has less space than the one in col-md-10 but in total they should add up to the whole browser's window size.

The content of the col-md-10 though acts as if there is less space than actually exists as can be seen here.

(in the Pen there also is a margin left that is not displayed in my browser)

The HTML

<body>
<div class="container">
            <div class="row">
                <div class="col-md-2" >
                  <div class="sidebar-nav">
                    <div class="navbar navbar-default" role="navigation" id = "verticalMenu">
                      <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                          <span class="sr-only">Toggle navigation</span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                        </button>
                        <span class="visible-xs navbar-brand">Menu</span>
                      </div>                      
                      <div class="navbar-collapse collapse sidebar-navbar-collapse">
                        <ul class="nav navbar-nav" id = "menuItems">

                          <li><a href="#">Menu Item 1</a></li>
                          <li class="active"><a href="#">Menu Item 2</a></li>
                          <li><a href="#">Menu Item 3</a></li>
                          <li><a href="#">Menu Item 4</a></li>

                        </ul>
                      </div><!--/.nav-collapse -->                    
                    </div>
                  </div>
                </div>              
                <div class="col-md-10" id = "myContent">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet rhoncus dui, vel tempor purus. Proin eu gravida elit. Donec nisi sapien, ultricies elementum justo in, ultricies semper nisi. </p>
                </div>
          </div>
      </div>
    </body>

The CSS

/* make sidebar nav vertical */ 
    @media (min-width: 768px) 
    {
      .sidebar-nav .navbar .navbar-collapse {
        padding: 0;
        max-height: none;
      }
      .sidebar-nav .navbar ul {
        float: none;
      }
      .sidebar-nav .navbar ul:not {
        display: block;
      }
      .sidebar-nav .navbar li {
        float: none;
        display: block;
      }
      .sidebar-nav .navbar li a {
        padding-top: 12px;
        padding-bottom: 12px;
      }
    }

    .container
    {
        margin: 0px;
    }

    #myContent
    {
        margin-top: 25%;
    }

    #verticalMenu
    {
        margin-top: 50%;
        background-color: transparent;
        border: none;
    }

    #menuItems a
    {
        color: black;   
    }

    #menuItems a:hover
    {
        color: red;
        background-color: white;        
    }

    .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover
    {
        background-color: transparent;
        border-right: 3px solid black;
    }

    .navbar-default .navbar-nav>li>a
    {
        border-right: 3px solid red;
        background-color: white;
        text-align: right;
    }

    .navbar-default .navbar-toggle
    {
        border: 2px solid red;
        border-color: red;
    }

    .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover
    {
        background-color: transparent;
    }

Upvotes: 1

Views: 64

Answers (1)

Linus Aronsson
Linus Aronsson

Reputation: 341

  1. The reason why the background of the active menu item is gray is because the CSS in the codepen is loaded before the bootstrap CSS and therefore the CSS where you try to set the background-color: transparent; won't be prioritized over the bootstrap CSS. Same reason for the margin-left probably.

  2. the col-md-10 sets the width of the div to 83.33333% (10/12). As in 83.333% of its parent div, which is a container with a set pixel width. If you changed the class .container to .container-fluid it will instead go all the way out because the .container-fluid has a width of 100%.

Upvotes: 2

Related Questions