Adaptive navigation bar featuring a drop-down menu and a branded logo placed strategically amidst sections

I'm having trouble making my navbar responsive. I want the links to collapse into a hamburger icon when the screen width is adjusted, displaying only the logo and hamburger icon with the links in portrait mode. The example at this link comes close to what I need, but the positioning of my logo in between the links is causing issues. Additionally, I'd like the logo to replace the first link once the screen width reaches a certain point. Any assistance would be appreciated.

nav{
  display: flex;
  width: 100%;
  height: 17%;
  background: black;
  align-items: center;
  justify-content: center;
  font-family: Times New Roman;
  font-size: 1.5vw;
    position: fixed;
    top: 0;
    z-index: 1;
}

nav a{
  text-decoration: none;
  background-color: white;
  color: black;
  margin: 0 40px;
  padding: 16px;
  border: 3px solid #f9c534;
}

#logo{
  width: 7vw;
  height: auto;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  margin: 0 5vw;
}


.dropbtn {
  padding: 16px;
  background: white;
  font-family: Times New Roman;
  font-size: 1.5vw;
  color: black;
  border: 3px solid #f9c534;
  margin: 0 40px;
}


.dropdown {
  position: relative;
  display: inline-block;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}


.dropdown-content a {
  color: black;
  padding: 12px 16px;
    margin: 0;
  text-decoration: none;
  display: block;
}

nav a:hover {
    background-color: #f9c534;
    border: 2px solid white;
}


.dropdown-content a:hover {
    background-color: #f9c534;
    border: 2px solid white;
}


.dropdown:hover .dropdown-content {display: block;}


.dropdown:hover .dropbtn {
    background-color: #f9c534;
    border: 2px solid white;
    }
<nav>
  <a href="">Home</a>
  <a href="">News</a>
  <div><img id="logo" src="src/Logo.jpg" alt=""></div>
  <a href="">Sponsors</a>
  <div class="dropdown">
 <button class="dropbtn">About us</button>
<div class="dropdown-content">
<a href="">Our employees</a>
<a href="">About company</a>
<a href="#">Founder</a>
</div>
  </div>
</nav>

htmlcssnavbar

Answer №1

I made some updates to your code to ensure that your logo remains centered and a hamburger menu has been added. I hope this resolves the issue for you. Thank you.

nav {
        background: black;
        font-family: Times New Roman;
        font-size: 14px;
        height: 94px;
        position: fixed;
        width: 100%;
        z-index: 1;
    }
    nav ul {        
        display: flex;
        justify-content: space-around;
        align-items: center;
        list-style: none;
        padding: 0;
        margin: 0;   
        height: 94px;     
    }
    nav ul li {
        background-color: white;
        border: 3px solid #f9c534;
        position: relative;
        white-space: nowrap;
    }
    nav ul li:hover {
        background-color: #f9c534;
        border-color: #fff;
    }
    nav ul li a {
        color: black;
        display: block;
        margin: 0;
        padding: 16px;
        text-decoration: none;
    }
    nav li ul {
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        display: none;
        position: absolute;
        right: -3px;
        top: 50px;
        height: auto;
        min-width: 150px;
    }
    nav ul li:hover ul {
        display: block;
    }
    nav #logo {
        border-radius: 50%;
        background: rgba(0,0,0,0.3);
        border: 0;
        padding: 0;
        width: 100px;
    }
    #mob-dropChecked {
        display: none !important;
    }
    @media only screen and (max-width: 768px) {
        nav {
            height: 60px;
        }
        nav ul {
            display: block;
            height: 60px;
            position: relative;
            top: 44px;
        }
        nav ul li {
            display: none;
        }
        nav #logo {
            display: block;
            position: absolute;
            left: 34%;
            top: -29px;
        }
        #mob-btn {
            background-image: url('https://www.shareicon.net/data/512x512/2017/05/09/885755_list_512x512.png');
            background-color: transparent;
            border: 0;
            background-repeat: no-repeat;
            background-size: contain;
            position: relative;
            top: 21px;
            height: 40px;
            width: 40px;
            padding: 13px 20px;
            z-index: 2;
        }
        #mob-dropChecked:checked ~ ul li{
            display: block;
        }
        nav li ul {
            position: relative;
            right: 0;
            top: 16px;
        }
    }
<nav>
  <label for="mob-dropChecked" id="mob-btn"></label>    
  <input type="checkbox" id="mob-dropChecked" role="button">
  <ul>
      <li><a href="">Home</a></li>
      <li><a href="">News</a></li>
      <li id="logo"><img id="logo" src="https://s.w.org/style/images/about/WordPress-logotype-alternative-white.png" alt=""></li>
      <li><a href="">Sponsors</a></li>
      <li><a href="">About us</a>
          <ul>
              <li><a href="">Our employees</a></li>
              <li><a href="">About company</a></li>
              <li><a href="#">Founder</a></li>
          </ul>
      </li>
  </ul>    
</nav>

Answer №2

To customize the appearance of the logo image on smaller devices, you can apply a class to the wrapping div element and set CSS properties such as 

position: absolute; top: 10px; left: 10px
using media queries.

Alternatively (though not recommended), you could opt for two separate img tags - one visible on desktop and the other on mobile by toggling their visibility with display: block / display: none.

Answer №3

To create a cleaner navigation design, consider removing the logo from the nav bar and replacing it with a spacer element. By using absolute positioning on the logo, you can easily place it where desired. While this approach may be considered a bit of a hack, it can effectively achieve the desired result. Check out an example implementation here: https://codepen.io/nickberens360/pen/bZmGWy

header{
  position: fixed;
  width: 100%;
  top: 0;
}

.logo{
  display: block;
  margin: auto;
  position: absolute;
  left: 36px; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto;
  width: 200px;
  z-index: 99999999;
  top: 0;
}

.spacer{
  margin: 0 100px;
  border: 1px solid red;
}

nav{
  display: flex;
  width: 100%;
  height: 17%;
  background: black;
  align-items: center;
  justify-content: center;
  font-family: Times New Roman;
  font-size: 1.5vw;
    z-index: 1;
}

nav a{
  text-decoration: none;
  background-color: white;
  color: black;
  margin: 0 40px;
  padding: 16px;
  border: 3px solid #f9c534;
  width: 143px;
  text-align: center;
}

#logo{
  width: 7vw;
  height: auto;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  margin: 0 5vw;
}


.dropbtn {
  padding: 16px;
  background: white;
  font-family: Times New Roman;
  font-size: 1.5vw;
  color: black;
  border: 3px solid #f9c534;
  margin: 0 40px;
}


.dropdown {
  position: relative;
  display: inline-block;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}


.dropdown-content a {
  color: black;
  padding: 12px 16px;
    margin: 0;
  text-decoration: none;
  display: block;
}

nav a:hover {
    background-color: #f9c534;
    border: 2px solid white;
}


.dropdown-content a:hover {
    background-color: #f9c534;
    border: 2px solid white;
}


.dropdown:hover .dropdown-content {display: block;}


.dropdown:hover .dropbtn {
    background-color: #f9c534;
    border: 2px solid white;
}

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

Innovative form elements for enhanced user interaction

I've been utilizing the jsFiddle below to achieve my desired outcome, but I'm looking to assign a unique ID for each addition. Any suggestions or tips would be greatly appreciated. Thank you! http://jsfiddle.net/nj4N4/7/ <span>Width: < ...

javascriptjqueryhtmlcssdynamic

Utilize Javascript/jQuery to play individual HTML audio files sequentially

On my website, each keyboard key is associated with an audio file. When a letter key from A to Z is pressed, the corresponding audio file is played. For all other keys (excluding ESC), a random audio file out of the 26 available is played. However, if mult ...

javascriptjqueryhtmlaudio

Using CSS to center the text and adding a separator line in blank spaces for a clean and stylish look

Request to Create Centered Date Element with Line Borders I am looking to design an element where the date is positioned at the center, while two horizontal lines fill the empty space on either side. Ideal Design I Want to Achieve: My Current Approach a ...

htmlcss

obtaining data from an HTML input field

I'm struggling to retrieve the value from an HTML input element, and despite my own research, it seems like I have the correct syntax. However, I'm still unable to get it to work, leaving me confused. When I log the value to the console, it appe ...

javascripthtmltypescriptinput

Incorporating HTML code from a Google Sheet cell and displaying it in a separate cell for visibility

In my Google Sheet, I am trying to extract HTML code from Column F in Tab2 and display it so that it appears in Column G of Tab 2 on the same row. For example, I have the following HTML code in cell F6 and I want it to be displayed in G6. Normally, the co ...

htmlgoogle-apps-scriptgoogle-sheetsgoogle-drive-api

Passing objects as arguments in a JavaScript function within a recursive function

I'm currently working on the following scenario: I have a div named "out" and a button labeled "in". When the button is clicked, it creates a new div called "extra" and a button named "extra_b". At that moment, both "out" and "in" are hidden. If "ext ...

javascriptjqueryhtmlrecursion

Aligning the right menu of Ant Design from the Layout component

How can I align the menu to the right in antd? https://i.sstatic.net/xmh6E.png Please Note: The image has been edited using Photoshop and is not real. I attempted to declare a className = "Menu" and set .Menu {align-items: right;} but it didn't wor ...

htmlcssreactjsantd

Click once to reveal, click twice to conceal the slider

I currently have a web page set up so that a single click on the text displays a slider for selecting a range of values. Now, I want to incorporate a feature where a double click will remove the slider. Below is the HTML code: <!DOCTYPE html> < ...

javascriptjqueryhtml

Website navigation toolbar with access level control

I'm currently working on a website with various webpage links in the navigation menu, and I want to restrict access for non-admin users. Would it be better to set up different access levels or just use passwords on each page? What approach would be mo ...

javascriptphphtml

Show a popover within a parent div that has limited visible space due to its hidden overflow

Struggling with AngularJS, I can't seem to find a simple solution for this problem. In my code, there's a div element with the overflow: hidden property set due to an internal scrollbar. Inside this div, there's a dropdown menu that is trigg ...

javascripthtmlcssangularjs

Material UI Grid Items not stretching to fill the entire available width

I'm currently working with a nested Grid system in Material UI, but the Grid items are only occupying a fixed width and leaving some empty space. The issue arises when this fixed space is used up and instead of adjusting their internal free space, the ...

cssreactjsmaterial-uimaterial-designstyling

Steps for creating a dynamic progress bar with inverted text style using only CSS

I am working on creating a dynamic progress bar with inverted text color using only CSS. To see examples of what I am trying to achieve, you can refer to the following links. Inverted Colors CSS progress bar CSS Progress Bars https://i.sstatic.net/VSs5 ...

htmlcss

Eliminate the extra space surrounding text when it is selected

One way to eliminate the space above and below text in this example is by adjusting the line-height and height properties. @import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700); span { font-size: 50px; font-weight: 600; ...

htmlcssheight

What could be causing the mousedown event to go unrecognized in JavaScript when using THREE?

I have a basic THREE.js setup and I am trying to click on a spherical object, however, nothing happens when I click anywhere in the browser. I attempted to follow the advice given in this post but it did not work. The full code is provided below: <!DO ...

javascripthtmlthree.js

What is the method for accessing an anchor element within a <Link> component in react-router-dom?

Within my React.js app, I have a Link tag from react-router-dom that contains an href tag. The Link works properly in the application, but when attempting to access the href tag nested inside the Link, clicking on it redirects me to the specified route pat ...

javascripthtmlreactjshrefreact-router-dom

Modify the CSS of one div when hovering over a separate div

I've been working on a simple JavaScript drop-down menu, and it's been functioning correctly except for one issue. When I move the mouse out of the div that shows the drop-down menu, it loses its background color. I want the link to remain active ...

javascriptcsshtmlonmouseout

If the color of the border matches and the width of the border is equal to

As I navigate through multiple divs, my goal is to identify those with a distinct blue border. Furthermore, if a main div possesses a blue border, I need to check for any inner divs that also have a blue border or a border width of 3px. If the main div has ...

jqueryhtmlcss

An illustration of Agile Web Development With Rails showcases an image placed on top of text

Currently, I am engrossed in the book Agile Web Development With Rails and have encountered a slight hitch on page 96. Following the instructions meticulously from the book, but unfortunately hitting an obstacle as shown below: https://i.sstatic.net/gp ...

htmlcssruby-on-rails

Mapping data to the user interface using React.js

I’m completely new to using the react.js library and I’m currently working on creating a simple CRUD application. In my project, I’ve added a file called dataprovider.js. export function getCrudData() { axios.get('https://api.github.com/us ...

javascripthtmlnode.jsreactjsapi

css Apply styles to form controls only if they are not empty

Utilizing an angularjs form, I have customized the following example to fit my code: .my-5 { margin:100px; } .form-group { position: relative; margin-bottom: 1.5rem; } .form-control-placeholder { position: a ...

htmlcss