Any ideas on how to align the links in the navbar at the center of the image instead of having them at the top?

 
      <!DOCTYPE html>
      <html>
          <head>
              <title>Funky Munky Arcade</title>

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

              <link rel="stylesheet" type="text/css" href="style.css">

          </head>

          <body>

              <nav class="navbar navbar-default navbar-fixed-top">

                  <div class="container">

                      <div class="navbar-header">

                          <a href="/index.html" class="navbar-left"><img src="FMA_Logo.png" class="logo"></a>

                      </div>

                          <ul class="nav navbar-nav" style="align-items: center;">
                              <li><a href="#">Home</a></li>
                              <li><a href="#">Parties</a></li>
                              <li><a href="#">Contact</a></li>
                          </ul>

                  </div>

              </nav>

              <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

          </body>
      </html>

I have made progress on my webpage by linking a custom stylesheet to the HTML document. I am currently working on aligning the navigation links with the logo image in the center, without relying heavily on padding for spacing.

htmlcsstwitter-bootstrap

Answer №1

To vertically center the elements, you can add a class to the parent element and set it to 

display: flex; align-items: center;
.

.nav-container {
  display: flex;
  align-items: center;
}
<!DOCTYPE html>
<html>

<head>
  <title>Funky Munky Arcade</title>

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

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <nav class="navbar navbar-default navbar-fixed-top">

    <div class="container nav-container">

      <div class="navbar-header">

        <a href="/index.html" class="navbar-left"><img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="logo"></a>

      </div>

      <ul class="nav nav-justified">
        <li><a href="#">Home</a></li>
        <li><a href="#">Parties</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

    </div>

  </nav>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

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

Issue with Angular 6: Jquery unable to detect element when using *ngIf directive

I'm currently developing an app using Angular 6, and I am facing an issue while trying to add a class using the jquery hover() method. In my navigation menu, I have 5 links, and although they all appear the same, 2 of them have an added *ngIf directiv ...

jqueryangularhtml

What could be causing the incorrect styling of the <h1> tag and certain Bootstrap elements in my Vuejs project when I import Buefy?

In my webpack-simple Vue.js project, I am utilizing Bootstrap 4 and Buefy. However, upon importing Buefy as per the documentation, I noticed that my <tag does not resize the text correctly and the nav-bar in Bootstrap 4 is displaying the wrong width. T ...

javascripthtmlcssvue.jsbuefy

What is the simplest method for a beginner to transfer form data from HTML to an email?

Currently I am in the process of developing a compact website and looking to design an HTML form that can send values to my client's email address. The snippet of code for the form is as follows: <form id="contact-form" method=" ...

phphtml

Update array when checkbox is selected/deselected

Using angular-google-maps, I am creating a map with various types of markers. Below the map, there are checkboxes in a simple form: <div class="mapOptions"> <form action="" class="form-inline" style="text-align:center"> <label for=""& ...

javascripthtmlangularjs

Switch up the stylesheet in WordPress when an administrator is signed in

Looking for a way to incorporate conditional PHP code into my theme that will load a different stylesheet when either an admin or a specific user (ID=1) is logged in. Does WordPress have a function that can make this happen? There's a particular div ...

phpcsswordpresswordpress-theming

Tips for adjusting column positions in a table while maintaining a fixed header and utilizing both horizontal and vertical scrolling

Is there a way to display a table that scrolls both horizontally and vertically, with the header moving horizontally but not vertically while the body moves in both directions? I have been able to shift the position of the columns, however, I am struggling ...

javascriptjqueryhtmlcsshtml-table

Technique for updating URL when submitting a form on a webpage

I'm a newcomer to the world of coding and I have a simple issue that needs fixing. I want to create a form field where users can input the last segment of a URL provided to them. After entering this segment, I want the page to refresh automatically a ...

javascriptphphtmlforms

script to pause video using jQuery

I have a script that works perfectly, but currently it only stops an instance of a playing video if a new video is started. I want to modify the script so that ALL instances of playing videos are stopped when the function stopAllButMe(); is called. Can s ...

javascriptjqueryhtmlvideo

"Encountering an issue when linking the file with phpMyAdmin

I've been struggling with this issue for hours now. I'm currently working on a registration form for my website and while coding in PHP, I connected it to MySQL and the Database using this line of code (which happens to be the 6th line): $mysq ...

phphtmlcss

Discovering visible ID numbers on the screen

My content includes the following: <div id="sContainer"> <div class="message0" id="l0">Initial Content 111</div> <div class="message1" id="l1">Initial Content 222</div> <div class="message2" id="l2">Initial ...

javascriptjqueryhtmlcss

One particular page is having trouble loading CSS, whereas it loads perfectly fine on a different page

I have two pages, 403.html and 404.html, both of which need to load the same style.css file. Strangely, when I visit the 403.html page, the CSS loads perfectly fine. However, when I navigate to the 404.html page, even though it has identical code with only ...

htmlcss

``Look at that cool feature - a stationary header and footer that stay in place

I'm seeking advice on how to design a website with a fixed header and footer that remain consistent across all pages, with only the content area altering. I've come across a site as an example - , but couldn't figure out how it was done even ...

javascriptjquerycssajax

I am working in Angular 13 and attempting to dynamically assign attributes to an SVG HTML element by passing in values from variables declared in a TypeScript file

Within a specific HTML file of my Angular13 app, I'm aiming to dynamically bind a list of attributes and their values to an element using Angular's double-binding approach {{attribute value}}. This will allow me to display a series of social medi ...

htmlangularsvgpropertiesattributes

is it possible to create cells within the <td> tag?

My table contains the following data: No Name Product Type Num of Units 1 ADA B112 3 Pcs 2 ADA B253 1 Pcs 3 ADA K23 6 Pcs 4 DUZK l1 10 Pcs 5 DUZK l5 10 Pcs 6 Naro NX 1 Pcs The SQL query I'm using is: $query = "SELECT *, GROUP_C ...

phphtmlsqlhtml-table

Unable to connect to a style sheet

I'm in the process of developing a web application and I'm facing an issue with linking a stylesheet to my app. Check out my code below: <html> <head> <title>Bubble</title> </head> <link rel=" ...

css

What is the best way to restrict user input to specific numbers only?

I have a text input field, how can I ensure that only numeric values from 1 to 31 are allowed? <input type="number" min="1" max="31"> ...

javascripthtmlcss

Transferring Data through the POST Method

Is there a way for me to send just one variable using the post method? I have retrieved the $row[id] from the database and need to include it in the form submission. We know how to send user input using dfs, but what about sending the specific $row[id] v ...

phphtmlpost

What is the best way to incorporate material icons onto a website?

When I attempted to display an icon on my webpage by adding <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> to the index.html file, only the icon name appeared as text instead of the actual ...

htmlcssgoogle-material-icons

What is preventing npm sass from compiling properly?

https://i.stack.imgur.com/ekbNW.png While making edits to my code, I've noticed that the sass-compiler isn't indicating any errors (red lines) or successful compilations (green lines). Can someone help me identify where I might be going wrong? ...

htmlcssnpmsass

Using "overflow-x: hidden" is ineffective on mobile devices

I'm facing an issue where the CSS property overflow-x: hidden is not working on mobile devices. Here is a snippet of my HTML code: <div class="topbar"> <div class="navbar-brand float-left"> <a href="#"><img src="asset ...

cssbootstrap-4overflow