Creating a dynamic button menu that adapts to different screen sizes

On my website, I have multiple pages set up with a background image that is centered and a vertical menu in a div. Check it out here: https://ibb.co/3Cmf0dt

The div containing the menu is typically positioned on the right, but its placement can vary from page to page - sometimes centered, sometimes slightly higher.

I need assistance with the CSS for this div-menu. How can I ensure that it scales down along with the buttons while always remaining in place relative to the background image?

Currently, my code does not achieve the desired effect as the buttons do not reduce in size and the div position is inconsistent with the background image. Here is my code for reference: https://ibb.co/9cQL1yD

Any help or advice you can provide would be greatly appreciated! Thank you!

htmlcssbuttonmenuposition

Answer №1

Open this in a new tab and adjust the window size.

function toggleNav() {
  var nav = document.getElementById("myTopnav");
  if (nav.className === "topnav") {
    nav.className += " responsive";
  } else {
    nav.className = "topnav";
  }
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="toggleNav()">
    <i class="fa fa-bars">&times;</i>
  </a>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>


</body>
</html>

Check out the demo here

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

Transitioning the style code from inline to the head of the document disrupts the straightforward JavaScript intended to

As I delve into the world of web development, I encountered a simple issue that has been causing me frustration for the past hour. It involves code to display the border color of a div element using an alert. The code works perfectly fine when the style is ...

javascripthtmlcss

Sophisticated Sidebar Design using Bootstrap 5

Looking to design a responsive sidebar for navigation on my page, with selected and hover properties. Visualizing the selected option to appear like this: Selected (active) option in sidebar The goal is to have the image cover the left side of the backgr ...

javascripthtmlcss

Creating personalized labels with Vue.js and Element UI radio button components

When using Element UI radio buttons on a form, I am attempting to personalize the label for each selection. Each radio button includes a prop called "label" where I can input my label text successfully. The problem arises when I need to apply a different s ...

javascriptcssvue.jsnuxt.jselement-ui

Spotlight on THREE.Line within the framework of three.js

Is there a way to achieve a visual effect similar to increasing the width of a THREE.Line beyond 1? I have contemplated drawing multiple lines side by side, but this would add more vertices to all my lines, so I see it as a last resort. Another idea I ha ...

javascripthtmlthree.js

Using PHP to extract an image in HTML

I have a server-side PHP file that retrieves a jpeg image from the server using echo file_get_contents(). My goal is to fetch this image through Ajax and display it in an HTML file on the client side. Although I am successfully able to receive the image ...

phpjqueryhtmlajaximage

Tips for establishing connections between pages?

public class Book { public string Title { get; set; } public string Author { get; set; } public string Publisher { get; set; } public int ISBN { get; set; } public int Pages { get; set; } public decimal P ...

c#htmlasp.net-mvcmodel-view-controller

Guide to triggering an ExtJS button click by referencing its span name

We're facing a challenge with a button on our web application that has a dynamic id. The only consistent identifier for this button is the span label (Bold in the code). Are there any techniques or locators we can use to click on this button? <em ...

javabuttonseleniumextjsselenium-webdriver

Learn how to personalize the Bootstrap carousel by keeping certain text elements static while others change with each background image

I am a beginner when it comes to using Bootstrap and I am seeking some guidance on how to make the following design concept a reality. Our goal is to have a carousel featured on our homepage, where the company name (aligned to the left) remains visible at ...

htmlcssbootstrap-4

What could be the reason for the lack of styling on the select element when using PaperProps in the MenuProps of my Select component?

I've been struggling to remove the white padding in this select box for a while now. I've tried countless variations and places to tweak the CSS with no success. Any suggestions on how to make it disappear? The project is using MUI 5, and I even ...

javascriptcssreactjsmaterial-uifrontend

Deactivate certain input elements when a specific radio option is chosen

Just starting out with JQuery here. I'm working on a search form that has 16 fields, most of which are textboxes and the rest are dropdowns. Underneath these fields, I have 3 radio buttons. When the first one is selected, certain fields in the form s ...

javascriptjqueryhtmljquery-selectorsradio-button

Checking the validity of user input statements

When 2 conditions are met, both error links and messages will display on top of each other. If an input is 0, the validation statement for empty inputs will also trigger. Additionally, if one input is not numeric but the other is, PHP will calculate the va ...

phphtmlif-statement

Using jQuery to update the input value when the mouse hovers over a div

Attempting to update an input value using jQuery mouseover. Situation: There are 5 divs with different colors and usernames. When hovering over a div, the input text (and background color for the color input) changes based on database values. Each time a ...

javascriptphpjqueryhtmlcss

Utilize Jquery's "find" function to showcase an image

I am attempting to showcase an image using jQuery. I have a function that accepts ID and PATH as parameters. The ID indicates the section (each section is an HTML page that loads upon user action). Additionally, there is a text area where I am displaying t ...

javascriptjqueryhtml

Incorporate real-time calculations using JavaScript (jQuery) with variables including initialization in HTML code

As a newcomer to JavaScript, I am encountering an issue that I need help with: I would like to convert the value in the number box into the answer next to it without any changes to the value. This should also include the variables NP0, NP1, and DP0 from t ...

javascriptjqueryhtmlvariableslive

Utilizing the jquery load() function to incorporate a PHP page that sends an HTML table to the main page

When I include foo.php in index.php, a form is displayed for submitting and retrieving a table of results. Interestingly, using PHP 'include' allows me to submit the form and receive the results, but when I try to load it using jQuery's load ...

phphtmljquery

Having trouble with the contact form? It seems to be experiencing issues with

Hey there! I'm encountering an issue with the following codes, where I'm getting redirected and receiving an error message stating "Undefined variable: subject in C:\wamp\www\boot\send.php on line 42." Any help would be greatl ...

phphtmlcss

The fixed navigation bar is obscured by the address bar in Chrome mobile

After starting a new project, I encountered an issue with my fixed navbar while testing it on Chrome on mobile iOS. Initially, I believed it to be a browser bug, but after reviewing previous projects, I realized that they functioned properly with the fixed ...

htmlgoogle-chromemobilescrollcss-position

How about connecting functions in JavaScript?

I'm looking to create a custom function that will add an item to my localStorage object. For example: alert(localStorage.getItem('names').addItem('Bill').getItem('names')); The initial method is getItem, which retrieves ...

javascripthtmlchaininglocal-storage

Providing a BR tag with a distinctive on-screen look (prior to the break happening)

After coming across this particular inquiry, I discovered that in the past, styling the line break (BR) tag with CSS was not possible. Nevertheless, thanks to the latest browsers, this limitation is a thing of the past now. My aim is to give certain line b ...

htmlcss

Regular expression to ignore the expression if it is found within a table

Looking to capture an expression, but only if it's not within a table using Ruby. hello. <p> <b> 1 capture </b> </p> <table class="tb1"> <tr> <td> <p> <b> 1 don't capt ...

htmlruby-on-railsrubyregex