What is the best way to create a responsive-friendly centered navbar?

I have successfully centered my navbar, but it doesn't appear to be very responsive-friendly. Additionally, the hamburger menu is not showing up when I collapse the menu. Any tips or suggestions would be greatly appreciated!

.navbar-header {
  height: 90px;
 
}

.navbar li {
  
  display: inline;
  padding-top: 20px;
  float: center;
  text-align: center;
}

.navbar {
  background: #003643;
}
 .navbar li a, .navbar .navbar-brand {
    color: #ABD7DE !important;
     font-size: 20px;
    font-family: 'Lobster', cursive;
   text-aline: center;
     
  
}
.navbar-nav li a:hover, .navbar-nav li.active a {
    color: #284047 !important;
    background-color: #ABD7DE !important;
  
}

#logo {
  max-height:150px;
  border: none;
  border-radius: 50%;
  margin-top: -5px;
  margin-left: 15px;
}

#nav .navbar-header{
  max-width: 900px;
  margin-left: 322px;
  margin-right: auto;
}



.jumbotron {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/500602/mountain.jpeg);
  height: 700px;
  repeat: none;
  font-family: 'Lobster', cursive;
  color: black;
  margin-bottom: 0px;
  text-shadow: 1px 1px black;
}

.button-primary {
  background: #B1DBDF;
  padding: 20px;
  font-size: 20px;
  border: none;
  border-radius: 20px;
  padding-left: 40px;
  padding-right: 40px;
  margin-top: 20px;
}
<nav class="navbar navbar-fixed-top">
  <div id="nav" class="container">
    <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>
      
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <a class="navbar-brand" href="#"><img id="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/500602/Portfolio_pic.jpg" alt="Zachary" /></a>
        <li><a href="#">Portfolio</a></li> 
        <li><a href="#">Contact</a></li> 
      </ul>
    </div>
  </div>
</nav>


<div class="jumbotron text-center">
  <div class="container">
    <div style="margin-top:180px" class="row">
      <h1>Welcome to my Portfolio!</h1>
      <h3>I'm so glad you stopped by!</h3>
      <button class="button-primary">Let's get started!</button>
    </div>
  </div>
</div>

htmlcsstwitter-bootstrapnavbar

Answer №1

.navbar-header {
  height: 90px;
 
}

.navbar li {
  
  display: inline;
  padding-top: 20px;
  float: center;
  text-align: center;
}

.navbar {
  background: #003643;
}
 .navbar li a, .navbar .navbar-brand {
    color: #ABD7DE !important;
     font-size: 20px;
    font-family: 'Lobster', cursive;
   text-aline: center;
     
  
}
.navbar-nav li a:hover, .navbar-nav li.active a {
    color: #284047 !important;
    background-color: #ABD7DE !important;
  
}

#logo {
  max-height:150px;
  border: none;
  border-radius: 50%;
  margin-top: -5px;
  margin-left: 15px;
}

#nav .navbar-header{
  max-width: 900px;
  margin-left: 322px;
  margin-right: auto;
}



.jumbotron {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/500602/mountain.jpeg);
  height: 700px;
  repeat: none;
  font-family: 'Lobster', cursive;
  color: black;
  margin-bottom: 0px;
  text-shadow: 1px 1px black;
}

.button-primary {
  background: #B1DBDF;
  padding: 20px;
  font-size: 20px;
  border: none;
  border-radius: 20px;
  padding-left: 40px;
  padding-right: 40px;
  margin-top: 20px;
}

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<nav class="navbar navbar-fixed-top">
  <div id="nav" class="container ">
  <div class="navbar navbar-default">
  <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
  </div>
     
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <a class="navbar-brand" href="#"><img id="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/500602/Portfolio_pic.jpg" alt="Zachary" /></a>
        <li><a href="#">Portfolio</a></li> 
        <li><a href="#">Contact</a></li> 
      </ul>
    </div>
  </div>
</nav>


<div class="jumbotron text-center">
  <div class="container">
    <div style="margin-top:180px" class="row">
      <h1>Welcome to my Portfolio!</h1>
      <h3>I'm so glad you stopped by!</h3>
      <button class="button-primary">Let's get started!</button>
    </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

When using jQuery, the onChange() function can be used to switch focus

Make sure to check out this fiddle first: http://jsfiddle.net/7Prys/ I am looking for a way to automatically focus on the next input field when a user enters a value in the previous field. This should happen until the fourth input field. Is there a simple ...

jqueryhtmlcss

Is there a way to place my searchbox in the top right corner of the page?

I am currently working on creating a search function for my list of products. However, I have encountered an issue where the searchBox is not appearing in the top right corner as intended. Despite trying various solutions, I have been unsuccessful in movin ...

javascriptcssreactjs

Is there a way to invoke a client-side function from the server?

Is there a way to display an alert at the top of the browser if the SQL query returns empty results? I tried using the "alert" function, but I'm struggling with customizing its appearance. I have a function in my HTML code that triggers an alert, but ...

htmltypescriptexpress

What is preventing this from functioning properly? (html/javascript)

I need help checking if this code is correct, as I am not very knowledgeable about HTML. I would appreciate it if someone could explain it to me in simple terms so I can understand. Here is the code: <input type="text" id="user" value=""> <inpu ...

javascripthtml

What are the steps to viewing an image or video file in full screen mode on a web browser?

Is there a way to play video/image files in full screen mode on a browser? How can I achieve this? ...

javascriptjqueryhtml

Attempting to transmit a pair of parameters from an HTML form through Flask (within a URL) in order to subsequently execute in a Python script

As a newcomer, I am working on a Python algorithm that requires two parameters obtained from an HTML form. Here is the snippet of my HTML code: <form action="result/"> <p><input class="w3-input w3-padding-16" method ...

pythonhtmlflaskget

Numerous HTML documents being uploaded to the server for a multitude of individuals

Currently, I am developing a game on a website where players create new rooms and are assigned specific roles with individual powers. Some players need to wait for input from others, creating a dynamic gameplay experience. Additionally, there are certain ...

javascripthtmlnode.jsmongodbnpm

How do I link data from a boostrap modal in vue.js?

To display a bootstrap modal, we can utilize the data-toggle attribute. For instance: <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#msg">Open Modal</button> I want to show the modal by using a boolean var ...

javascripthtmlvuejs2bootstrap-4vue-component

Steps for ensuring a div component appears on top of any other component (like h1 or p)

The outcome of the code below is displayed in this image: https://i.stack.imgur.com/CPDqC.png Is it possible to make the dropdown overlap on top of the 'HELLO's text, hiding the h1 and p tags? I have tried using z-index without success. Making ...

javascripthtmlcssreactjs

Maintain the alignment of content in the center while expanding background images

I am looking to create a website with a split background effect, similar to the design on this site . I want to maintain a content container width of 980px while achieving this look. I attempted to accomplish this by adding height and background color pro ...

htmlcssbackground-color

Discovering content between HTML tags using Python Regular Expressions

Can someone help me with extracting the content between HTML tags shown here: <div class="td-wrap"> <a href="/universities/university-cambridge" class="uni-link">University of Cambridge </a> </div> ...

pythonhtmlregex

Tips for creating a concise summary of written content

I am interested in creating an AI-powered summary generator for text input within a textarea element. Below is the HTML code snippet I have been working with: <textarea id="summary">Enter your text here</textarea> If you hav ...

javascripthtmltextartificial-intelligence

expanding a div to cover the entire width

Recently, I encountered an issue with a div element positioned at the beginning of a block. To center it on the page, I utilized flexbox and successfully achieved the desired result. My CSS code to center the div: .elementor-element-acf3e44{ display: fl ...

htmlcssflexbox

Issues persist with jQuery ajax request attempting to retrieve data from database

I attempted to retrieve data from my database using jQuery AJAX. Below is the code snippet I used: <script> $(document).ready(function(){ function fetch_data(){ $.ajax({ type:"POST", url:"http://localhost:88/phpPoint/select.php", success:function(re ...

javascriptphpjqueryajaxhtml

Adjust the fixed navbar position in MaterializeCSS as you scroll

First of all, I apologize for my limited proficiency in English. I have a website with a company logo at the top and a navigation bar below it. My goal is to change the position of the navigation bar to the top when scrolling past the company logo. I att ...

javascripthtmlmaterial-designmaterialize

Additional section for positioning beyond designated spot

If you want to understand better, take a look at this link: Here's the scenario: I have one article with 2 CSS columns. In the first column, there is text and images for the article, while in the second column, I want to place aside elements like tex ...

htmlcsszurb-foundation

Adjust the background color of a list item using Typescript

At the top of my page, there's a question followed by a list of answers and the option to add new ones. You can see an example in the image below. https://i.stack.imgur.com/NPVh7.jpg The format for each answer is "(username)'s response: at this ...

htmlangulartypescript

What could be causing my Bootstrap 5 hover effect to malfunction?

Can anyone help with changing the hover effect of a bootstrap button in my code? Here's the HTML: <button type="button" class=" btn btn-dark">Sign Up</button> And here's the CSS I tried: .btn-dark:hover { color: ...

cssbuttoncss-selectorshoverbootstrap-5

I am encountering issues with my XPath in certain scenarios

When attempting to do an assertion with the total of a dynamic table, I am encountering difficulties writing XPath that works for all scenarios. The issue arises because the table sometimes contains only 1 image and other times it may contain 5 images. In ...

htmlcssseleniumxpath

Display a div using jQuery when it reaches halfway the height of another div

I have a code snippet that hides the .wp-filter when reaching the bottom of the .wpgb-layout jQuery(window).bind('scroll', function() { if(jQuery(window).scrollTop() >= jQuery('.wpgb-layout').offset().top + jQuery('.w ...

htmljquery