Creating a responsive navbar with a custom width form

Just started working with bootstrap and playing around with some new UI concepts. I'm having an issue with a non-responsive form width within my navbar, even though the navbar itself is responsive. I've tried using different collapse classes, but nothing seems to be working. I think it's because I hard-coded the width of the form, but I'm not sure how to set the desired width without doing that.

Check out the code here

HTML

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="row">
  <div class="col-md-12">
    <ul class="largenav pull-right">
      <li class="upper-links"><a class="links" 
href="http://clashhacks.in/">Home</a></li>
      <li class="upper-links"><a class="links" 
href="http://clashhacks.in/">Account</a></li>
      <li class="upper-links"><a class="links" 
href="http://clashhacks.in/">Cart</a></li>
      <li class="upper-links"><a class="links" href="http://clashhacks.in/">Help</a></li>
      <a href="#"><i id="bell"class="fa fa-bell fa-1x" aria-hidden="true"></i></a>
  </div>
</div>
<a href="#" class="navbar-brand">SHOPGIANT</a>
<form class="navbar-form navbar-center" role="search">
  <div class="form-group">
    <input type="text" class="form-control input-large" placeholder="Find brands, products, and items" id="navBarSearch">
  </div>
  <button type="submit" class="btn btn-default"><i class="fa fa-search" aria-hidden="true"></i></button>
</form>

CSS

htmlcsstwitter-bootstrapresponsive-designnavbar

Answer №1

Check out the solution here

body{
    background:url('http://www.wallpaperup.com/uploads/wallpapers/2012/10/21/20181/cad2441dd3252cf53f12154412286ba0.jpg');
    padding:50px;
}
.navbar{
  margin: 50px;
  padding-bottom:10px;
} 

#bell {
  margin-right:50px;
  color: white;
}

.form-group{
  width: calc(100% - 55px);
  display: inline-block;
}

#navBarSearch{
  width: 100%;
}
.btn{
  width:50px;
  margin-left: -5px;
  height: 34px;
}

.links{
  color: white;
}
.upper-links {
  display: inline-block;
  padding: 0 11px;
}

.navbar-brand{
  color: white !important;
  font-size:30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<nav class="navbar navbar-inverse">
  <div class="container-fluid">


    <div class="row ">
      <div class="col-md-12">
        <ul class="largenav pull-right">
          <li class="upper-links"><a class="links" href="http://clashhacks.in/">Home</a></li>
          <li class="upper-links"><a class="links" href="http://clashhacks.in/">Account</a></li>
<li class="upper-links"><a class="links" href="http://clashhacks.in/">Cart</a></li>
<li class="upper-links"><a class="links" href="http://clashhacks.in/">Help</a></li>
          <a href="#"><i id="bell"class="fa fa-bell fa-1x" aria-hidden="true"></i></a>

      </div>
    </div>
    <div class="row">
      <div class="col-md-3">
        <a href="#" class="navbar-brand">SHOPGIANT</a>
      </div>
      <div class="col-md-9">
        <form class="navbar-form navbar-center" role="search">
          <div class="form-group">
            <input type="text" class="form-control input-large" placeholder="Find brands, products, and items" id="navBarSearch">
          </div>
          <button type="submit" class="btn btn-default"><i class="fa fa-search" aria-hidden="true"></i></button>
          </div>
      </div>
    </form>
  </div>
</nav>

This should meet your requirements.

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

How can the color of the wishlist icon be modified in Reactjs when the item is available in the database?

Is there a way to change the color of the wishlist icon based on whether the item is in the database? If the item is present, its color should be brown, and if it's not present, the color should be black. Additionally, I want the ability to toggle be ...

javascriptcssreactjs

There is a mismatch in the host name: please consider using a domain name (e.g., https://myname.myorg.com) instead of https://localhost

My current setup involves an HTML application that sends an AJAX request to a Qt C++ HTTP Server running on my local computer, hosted at "https://localhost:8081". However, I am facing an issue with a host name mismatch causing the AJAX request to fail. Is ...

htmlajaxqtsslhostname

Issue with custom leaflet divIcon not maintaining fixed marker position during zoom levels

After creating a custom marker for leaflet maps, I noticed that it shifts position drastically when zooming in and out of the map. Despite trying to adjust anchor points and positions, the issue persists. I have provided the code below in hopes that someon ...

javascripthtmlcssleaflet

Eliminating unnecessary gaps caused by CSS float properties

I need help figuring out how to eliminate the extra space above 'Smart Filter' in the div id='container_sidebar'. You can view an example of this issue on fiddle http://jsfiddle.net/XHPtc/ It seems that if I remove the float: right pro ...

javascripthtmlcss

How well does position:fixed function in Internet Explorer versions 7, 8, and 9?

Before diving into using position:fixed, I'd like to confirm if it works well in Microsoft browsers. Thank you. ...

cssinternet-explorer

Combining an input box and label on a single line with the help of Bootstrap

Hi, I'm Sonal and I'm currently utilizing a Modal on my website. Within this Modal, I am looking to create a form with labels and input boxes displayed on the same line. Below is the code snippet I am working with: <a data-toggle="modal" hre ...

htmlcsstwitter-bootstrap

What is the best way to incorporate a YouTube video into my HTML webpage?

Looking to add some YouTube links to my webpage - I'm a complete newbie and clueless about formats and embedding. Can someone guide me on what to use and how to insert it into my HTML code? Appreciate any help! ...

htmlyoutubeembedded-video

Background color vanishes (occasionally) on the contact section of my website when viewed in Chrome

My contact page has an issue that only occurs in Chrome, where the background disappears most of the time. This problem is not present in Firefox, Edge, or Safari on my TA's MacBook, but interestingly, hovering over a box resolves the issue on her dev ...

htmlcssgoogle-chrome

How do you retrieve specific colored elements from an array using jQuery (or plain JavaScript)?

I am currently in the process of creating interactive checklists. One feature I have implemented is changing the color of a header if all checkboxes associated with it are checked, as shown below: $("input[type='checkbox']").click(function(){ i ...

javascriptjquerycssarrays

I am facing an issue with the DOM object in my ejs template when used under the script tag. How can I resolve this problem?

<%-include ("partials/header.ejs") %> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <header> <!--NAVIGATION BAR--> <img class="calender-pic" src="images/calendar.png ...

javascripthtmlnode.jsexpressejs

Using jQuery to toggle visibility on click within WordPress

Looking for a way to make three buttons change color on hover and display different content when clicked? You're not alone! Despite searching through tutorials and forums, the solution remains elusive. The buttons are structured like this: <div i ...

javascriptjquerycsshtmlwordpress

Having trouble with margin auto 0 not functioning properly in Safari on iPad?

I'm facing a challenge with centering a div in Safari on iPad. It works fine in Chrome, but in Safari there are margins on the left and right which require scrolling to view the whole content. Any suggestions on how to make this work seamlessly in bot ...

htmlipadresponsive-design

The bootstrap switch button remains in a neutral grey color

Ordinary: Initially clicked: Click again: After the second click, it remains grey and only reverts on a different action like mouse click or selection. Is there a way to make it go back to its original state when unselected? ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3

Shift heading 1 as well as heading 2 to the image's right side

Is it possible to position <h1> and <h2> to the right of an image while ensuring that <h2> is displayed below <h1>? Any suggestions on how I can achieve this layout? This is my current code <html> <link rel="stylesheet" h ...

htmlcss

How can we enhance the integration of HTML and PHP for a smoother workflow?

Are there alternative solutions, aside from using a template engine like Smarty, for managing large code like this? <table class="table table-striped dataTable table-bordered"> <thead> <tr> <?php $o ...

phphtml

React is unable to identify the prop `controlID` when used on a DOM element in React-Bootstrap Forms

While constructing a form with React components sourced from react-bootstrap, and taking guidance directly from an example provided in its documentation: <Form.Group controlId="formBasicEmail"> <Form.Label>Email address</Form.Label> ...

javascriptreactjsformstwitter-bootstrapreact-bootstrap

Preloading and rendering an image onto a canvas in a Vue single-page application is not functioning as expected

I am working on a Vue 3 SPA where I am manipulating canvas elements. To preload my image, I am using the function provided below: async preloadLogo () { return new Promise( (resolve) => { var logo_img_temp = new Image(); const logo_s ...

javascripthtmlvue.jscanvas

Internet Explorer does not support the use of a:focus

Unfortunately, the issue with a:focus not working in IE is still unresolved. I have been searching for a solution, but have not been able to find one yet. <div class="city-selection"> <ul> ...

htmlcssinternet-explorerfocus

The functionality of my website is currently experiencing difficulties when accessed through the Android UC Browser

My website, , is experiencing issues with product loading and the '+' button in the side menu not working on UC Browser. It works fine on other Android browsers like Chrome and Firefox, but I am confused as to why it is not functioning properly o ...

javascriptjqueryhtmlcssuc-browser

Guide on displaying a real-time "Last Refreshed" message on a webpage that automatically updates to show the time passed since the last API request

Hey all, I recently started my journey into web development and I'm working on a feature to display "Last Refreshed ago" on the webpage. I came across this website which inspired me. What I aim to achieve is to show text like "Last Refreshed 1 sec ago ...

javascripthtmlexpressnpm-package