Looking to resolve the line formatting issue in my Bootstrap navigation bar

I'm having an issue with my responsive navigation in Bootstrap. When I resize the window, the navigation transforms to allow content expansion. However, I've noticed that when I expand the content, the lines, background color, and logo start to look unprofessional. How can I resolve this issue? It doesn't look quite right...

.navbar {
  background: #007BC4 !important;
  padding: 10px !important;
}

.nav a {
  color: white !important;
}

#sign_up {
  position: absolute;
  left: 100%;
  top: 100%;
  transform: translatex(-50%);
}

#email_form, #password_form {
  padding: 5px;
  font-family: 'Open Sans', sans-serif;
  border-radius: 3px;
  border: 1px solid #007BC4;
}

#login_button {
  background: #0092ea !important;
  border: 1px solid #005c93;
  font-weight: bold;
  font-size: 14px !important;
}

#login_button:hover {
  background: #007BC4 !important;
}

#remember_label {
  color: white !important;
  font-weight: normal !important;
  font-size: 13px;
  font-family: 'Open Sans', sans-serif;
}

#forgot_password {
  color: white !important;
  position: relative;
  left: 65px;
  font-size: 13px !important;
}

#remember {
  position: relative;
  top: 2px;
}

.navbar-brand{
height:auto;
padding: 0px 15px;
}
.navbar-brand img{ max-width:250px;width:100%;}
.navbar-nav > li > a{padding-top: 0;}
@media (max-width:1000px) {
.navbar-header {
    float: left;
width:25%;
}
.navbar-brand{
width: 100%;
margin-top: 12px;
padding:0;
}
}
@media (max-width:767px) {
.navbar-header {
    float: left;
width:100%;
margin-left: 0 !important;
}
.navbar-brand{
width: auto;
margin-top: 0px;
}
.navbar-brand img {
    max-width: 200px;
}
.navbar-nav {
width: 100%;
float: left;
margin: 7.5px 0;
}
.navbar-nav > li > a{
padding: 10px 0;
}
.navbar-form{
float: left;
}
#sign_up {
position: relative;
left: 50%;
top: 0;
width: 100%;
padding: 8px 0px;
}
#email_form, #password_form{
margin-bottom: 5px;
width: 100%;
}
#login_button{
width: 100%;
}
}
<!-- CSS Files -->
    <link rel='stylesheet' href='http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">

        <div class="navbar-header">
          <button button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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" rel="home" href="#" title="Buy Sell Rent Everyting">
                <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
            </a>
            
        </div>
        
        
        <!-- Sign Up -->
        <div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse">
            
<ul class="nav navbar-nav">
                <li> <a href="#"><button class="btn btn-success btn-sm" id='sign_up'> Sign Up </button></a> </li>
            </ul>
<!-- Login -->
<div class='navbar-form navbar-right'>
  <form action='#' method='post'>
    <input type='text' placeholder='Email' id='email_form'>
    <input type='text' placeholder='Password' type='password' id='password_form'>
    <button class="btn btn-primary btn-sm" id='login_button'>Login</button>
  </form>
  
  <input type='checkbox' name='remember' id='remember'> <label for='remember' id='remember_label'> Remember me </label>
  
  <a href='#' id='forgot_password'> Forgot Password? </a>
  
</div>

</div>

    </div>
</div>

<!-- JS Files -->
  <script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
  <script src='http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>

Answer №1

To achieve a transparent top border, try removing the navbar-form class and making a few small adjustments:

Check out this link for details

<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button button="" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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" rel="home" href="#" title="Buy Sell Rent Everyting">
                <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" class="img-responsive">
            </a>
        </div>

        <!-- Sign Up -->
        <div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#">
                        <button class="btn btn-success btn-sm" id="sign_up"> Sign Up </button>
                    </a>
                </li>
            </ul>
            <!-- Login -->
            <div class="navbar-right">
                <form action="#" method="post">
                    <input type="text" placeholder="Email" id="email_form">
                    <input type="text" placeholder="Password" id="password_form">
                    <button class="btn btn-primary btn-sm" id="login_button">Login</button>
                </form>
                <input type="checkbox" name="remember" id="remember">
                <label for="remember" id="remember_label"> Remember me </label>
                <a href="#" id="forgot_password"> Forgot Password? </a>
            </div>
        </div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the position if the height exceeds 100 pixels

Can someone help with this code issue? $(document).ready(function () { if ($('.pi-img').height() > 100) { $(this).css('top' , '30%'); console.log('yeah'); } }); I am encountering difficu ...

Combine floating left with a centered element

I am trying to figure out how to center the second element in a div without knowing the width of the first one. My aim is to have "foo" align to the left and "bar" centered within the original div. I have managed to achieve this by setting a static width ...

``Unusual padding for the body in VueJS and Nuxt, with a touch of CSS

I am currently working with VueJS + NuxtJS and have implemented a background gif. Right now, the code looks like this: body { margin: 0 auto; background: url("assets/video/background-darked.gif") no-repeat center center fixed; -webkit-backg ...

What causes the disparity in appearance between this html/css code in firefox versus ie?

css: * { margin:0; padding:0; } .blue-button { width:auto; display:inline-block; } .blue-button:before { /*background-image:url('blue-button.gif');*/ background:red; ...

tilted container with outline

One challenge I'm facing is with a code that involves 6 slanted divs. I would like to add a black border to only the center Title 2 div. However, when I apply the border, it only shows on the top and bottom, not on the left and right sides. .title ...

"When using Webpack and Sass, the background image specified with background: url() is processed correctly. However, when using webpack-dev-server, the image is

Currently, I am utilizing Webpack 2 in conjunction with webpack-dev-server and Sass loader. Here is my current configuration: { test: /\.scss/, loaders: [ "style", { loader: "css", query: { modules: false, sourceMap: true } }, ...

What is the method for changing the color of text within a button when hovering using CSS?

In my OceanWP WordPress theme, I customized the top-bar menu by adding a button labeled "Post a Job" using CSS. Screenshot Link I have two top-bar menus - one for logged-in users and another for logged-out users. The "post a job" button has a 2px purple ...

Center the R Shiny showNotification on the screen

Currently, I'm exploring ways to customize the feature of showNotification() in Shiny. Link to example notifications My goal is to have the message appear at the center of the screen instead of the bottom-right corner. While it doesn't seem pos ...

Ensuring IconButton is perfectly aligned with Text in one straight line

I want to display IconButtons alongside plain text in a single block of text, but the result didn't turn out as I had hoped. Here is what I attempted: JS(ReactJS): <div> <span> <h3>Title</h3> <IconButton className ...

What steps should be taken to address IE6 problems when a website functions properly in other browsers?

If you come across a website that functions perfectly on all browsers except for IE6, where the layout is extremely distorted but rebuilding the entire markup is not an option. Furthermore, only CSS selectors supported by IE6 are being utilized on the sit ...

Manually adjusting the aria-expanded attribute to "true" does not result in opening a new tab

After a certain condition is met, I want to open another tab. Below is my bootstrap navbar code along with the jQuery script. <ul class="nav navbar-default nav-justified" role="tablist" id="navbar"> <li role="presentation" class="active"><a ...

Tips for generating documentation using markdown within the docs directory on GitHub with the help of JavaScript

After browsing through numerous documentation websites, I have noticed that many of them share the same layout and features. This has led me to question whether there is a common library used by all these documentation sites. How do they achieve this unif ...

Expandable Buttons - Bootstrap version 3.3.4

I'm currently working with a bootstrap collapsible button group and I'm facing an issue where only one group box should be visible at any given time. I tried creating a JavaScript function to remove the "in" class and update the aria-expanded att ...

Exploring the techniques for displaying and concealing div elements with pure JavaScript

Here's an example of code I wrote to show and hide div elements using pure JavaScript. I noticed that it takes three clicks to initially hide the div elements. After that, it works smoothly. I was attempting to figure out how to display the elements ...

Tips for updating the content of a div with fresh data using a slideshow effect in jQuery

Imagine you have a div called A and an array filled with text data. When t=0, div A will display $data[0]. Then, after every n seconds, I want the div to show the next piece of data in the array. I am interested in creating a transition effect similar to ...

The appearance of success in the form is not being adequately shown

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href= ...

Is there a way to bypass the initial result when using document.querySelectorAll?

this is my own unique html content <div class="content-body"> <table style="text-align:center;" class="table table-bordered"> <tbody> <tr> <th>Text Line</th> </tr> <tr> <td> ...

Is it necessary to use the strict doctype if our code is already valid with the transitional doctype?

Are there any drawbacks to using a transitional doctype with presentational or deprecated elements, even if our code is valid in W3C validation with a transitional doctype? Will we need to rewrite or edit the code of websites using XHTML/HTML transitional ...

Managing line breaks in CSS

Here is a sample of HTML code with text lines breaking: <pre> one two three four five six </pre> I am looking to display it in the browser like this (with two lines per row and space using tab character "\t"): one two three four ...

How can I fill the space around a centrally aligned div?

I'm looking to create a centered div with additional divs or spans on each side to fill the empty space. Currently, I am using margining to center the div and you can see the implementation in this example. HTML Code: <div id='A> <d ...