Adjustable CSS menu with dropdown on screen size change

I am currently working on creating a responsive CSS menu with dropdown functionality. I am facing some challenges in implementing this feature. Here is the progress so far: http://codepen.io/anon/pen/vmxua

Below is the CSS code snippet:

nav {
margin: 0 auto; 
text-align: center;
background: #fff;
height:70px;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
background: rgba(148,148,149,1);
/* Additional gradient background styles */
}

nav ul li {
float: left;
margin: 0;
padding: 0;

}

/* Styling for nav links */
nav ul li a {
display: block; 
padding: 10px 7px;
width:80px;
color: #000;
text-decoration:none;

}
nav ul li~li { border-left: 1px solid #857D7A; }

/* Background and color for active link */
nav .active a {
background: rgba(180,85,12,1);
/* Additional gradient background styles */
color:#fff;
}

Thank you for your assistance.

htmlcssmenu

Answer №1

Create a navigation menu similar to the one in the provided URL using CSS3 media queries.

HTML:

 <nav>
<ul>
    <li class="active"><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a> </li>
    <li><a href="#">Item 4</a></li>
     <li><a href="#">Item 5</a> </li>
   </ul>

</nav>
<select>
  <option value="#">Item 1</option>
  <option value="#">Item 2</option>
  <option value="#">Item 3</option>
  <option value="#">Item 4</option>
  <option value="#">Item 5</option>
</select>

CSS:

select{
  display:none;
}
@media (max-width: 480px) {
  select {
    display: block;
    width:200px;
    margin:0 auto;
  }
  nav{
    display:none;
  }
}

http://codepen.io/anon/pen/akcfe

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

What has caused the space between these articles?

I have created a section containing three articles and I am confused about the margin/padding between the articles: This is my HTML code: <section id="home"> <article> <h1>Overview</h1> </article> <article> <h1& ...

htmlcss

Rgd: Double-Sided Horizontal Slide Control

While browsing the internet, I came across several examples of horizontal sliders with adjustable values. For example, if I set the maximum value as 100 and move the slider 10 sectors to the left, each sector would decrease by 10. What I am trying to ach ...

javascriptjqueryhtmlcss

What is the method for utilizing the variable from express in HTML?

Currently, I am working with Express and have the following code: app.get('/', requiresAuth(), (req, res) => res.sendFile('/db_auth_site/index.html', { title: 'Hey', message: 'Hello there!' }) ); I am trying ...

htmlnode.jsexpressnodejs-server

Trouble with the Bootstrap navbar loading correctly

Recently I started using Bootstrap and decided to implement one of their templates. Everything is working fine, except for my navbar which is not loading correctly. It should look like this: Desired Navbar However, in both Chrome and Firefox, it appears l ...

htmlcsstwitter-bootstrap

The button remains active in Internet Explorer 10 and cannot be disabled

The button has been specified as <input type="button" id="disable" disabled="disabled" value="Upload" /> However, the appearance of the button does not show it as disabled in Chrome, Firefox, and Safari. Additionally, in Internet Explorer, the bu ...

javascriptjqueryhtml

Display dropdown with multiple lists using LocalStorage

I'm facing an issue with displaying a list in a dropdown multiple using LocalStorage. The problem arises after saving data to LocalStorage and then going back to my modal. The saved list does not show up in the dropdown. I simply want to display the l ...

javascripthtml

In HTML, data can be easily accessed, however, JavaScript does not have the same

When trying to access the 'data' element in a JSON object, I have encountered an issue. The element is accessible when called from HTML, but not when called in JavaScript. HTML: <p>{{geoJson.data}}</p> JavaScript: let scope; let d ...

javascripthtmlangularjs

Conceal PHP variable using Cascading Style Sheets

Looking for a solution to this issue, but can't seem to find it anywhere! I need to hide the suffix variable from displaying using CSS or another method. When I simply remove it from the code, the whole site breaks for some reason. Here's the c ...

phphtmlcsswordpress

What is the best way to utilize a single component for validating two other components?

I am encountering an issue with my components setup. I have three components in total: GalleryAddComponent, which is used to add a new element, GalleryItemComponent, used to edit an element, and FieldsComponent, the form component utilized by both GalleryA ...

javascripthtmlangulartypescriptvalidation

"Using JSoup on an Android app to extract the content within specific HTML tags and display each one on its

Looking for some assistance with an issue I'm experiencing with my HTML code: <li itemprop="something">Text 1</li><li itemprop="something">Text 2</li><li itemprop="something">Text 3</li><li itemprop="something"& ...

androidhtmlkotlinjsoup

Unusual occurrence: unexpected positioning issue with iOS and Chrome (Windows)

My website looks perfect on Firefox, but unfortunately, it's not displaying correctly on Safari (iOS) and some Chrome devices. The Menu-Bar, which should be position fixed, is not showing properly. I'm not sure what the issue is. Screenshots: ...

ioscssgoogle-chromecss-position

Troubleshooting problems with the height of nested DIV elements

Issue I am attempting to replicate the layout depicted in the image below. The black area represents the body with id="library", the grey div is id="body" (which is not visible due to lack of margins for inner divs), the light blue div is id="sideBar", th ...

csshtml

In search of assistance in delivering HTML form data to a public HTTP service

Seeking assistance with forwarding html form data to a public http service. Any guidance or tutorial recommendations would be greatly appreciated! Below is the structure of my form: <span class="text"> <input class="text" type="text" name="First ...

phpjavascripthtml

Resizing an image proportionally using a div container with a child specifying the height dimension

When using a div element on its own, it automatically adjusts its height to fit its contents. I am trying to achieve a layout where a parent div contains two child elements: another div (or left-aligned image) and an unordered list (ul). The inner div (or ...

htmlcsssemantic-markup

CSS Positioning: the container is not the right size for its content dimensions

Code Snippet: <div content> <div post> <div post> ... </div> Styling: .post { margin: 0; padding: 110px 20px 20px; float: left; width: 560px; position: relative; display: block; } #content { display ...

csspositioncontainers

One column stretching all the way to the window's edge while the other column stays contained within its container

Looking to design a two-column layout where the left column takes up 40% of the container and aligns with it, while the right column expands all the way to the window edge. I managed to achieve this using position:absolute, but I'm curious if there&ap ...

htmlcsslayout

Problems Arising with HTML Form Functionality

After creating an HTML form, I encountered an issue where upon submission, it prompts me to open G Mail or Outlook in order to send the email. Although the correct email address is populated, I wish for the email to be sent without having to open any ext ...

phphtmlformssendmail

Eliminate resistance on HTML components

Have you ever noticed that when you click on an HTML element, such as images, you can drag a "shadow version" of them around on the screen? For example, take the Stack Overflow logo. If you click and drag it, you'll see a dark version of the logo mov ...

javascripthtmlcss

What are some ways to create a larger-than-life mui button size?

The current MUI button supports size prop values as the following small medium large Although this feature is handy, I find myself wishing I could specify the height and width using the style prop to customize the size like <Button v ...

htmlcssreactjsbuttonmaterial-ui

Why can I only click on the text of my button?

Looking for a quick fix here! I've been trying to make the entire button clickable, but so far, only the text is hyperlinked. Any suggestions on how to enclose the whole button with the link? As you can see, I'm working on making it mobile-friend ...

jqueryhtmlcss