Struggling to get my list to adjust properly as the screen size increases

I am currently in the process of creating a website that features a homepage navigation menu. When users hover over the menu options, those with arrows will reveal a submenu with additional selections below them. Here is an image for reference (https://i.sstatic.net/xkKMs.png). My main challenge lies in making the submenu responsive to different screen sizes. I am struggling to keep it consistently aligned with the menu option as the screen size changes.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Yazigi Tech</title>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4969b9b808780869584b4c1dac7dac4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <!-- More code here -->
</body>
</html>

And this is the related CSS:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* CSS code here */

I have experimented with changing displays to relative and using percentage units but haven't been able to find a solution to the alignment issue. Your insights would be greatly appreciated!

htmlcssresponsive-designfrontendresponsive

Answer №1

For optimal results across various viewport widths, it is recommended to remove the transform: translateX(-138px) declaration from the .nav .has-submenu .sub-menu rule.

To resolve misalignment issues with sub menus, apply margin-left: 0; margin-right: 0 to the .sub-menu. This will override the previous styling of margin: 0 20vh introduced by the .nav ul rule.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
html,
body {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  overflow-x: hidden;
  margin: 0 auto;
  padding: 0;
}

a {
  color: white;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
}

nav {
  ...
...

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Yazigi Tech</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <!-Navigation Bar->
  <nav>
    ...
    ...
  </nav>

  <!-1024x768 Banner->
  ...
    ...
  </div>
</body>

</html>

Answer №2

By setting margin-left: 0; and margin-right: 0 for .sub-menu, I was able to override the margin: 0 20vh that was applied by the .nav ul rule. Additionally, removing the transform: translateX(-138px) from the .nav .has-submenu .sub-menu rule helped me achieve the desired outcome.

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

Is it possible to combine Django urls and Vue routes in a single project?

After setting up my Django app and implementing the authentication layer using Django-Allauth with features like email confirmation, password reset, and two-factor authentication, I've come to the realization that for my app's interactive nature ...

javascriptpythondjangovue.jsfrontend

Establishing the footer within dompdf

This snippet demonstrates the specified behavior (jsfiddle). <!--Footer--> <div id="footer"> <span class="alignleft">$unique_ID</span> <span class="alignright"> Page <span class="pagenum"></span></span> < ...

phphtmlcssdompdf

Include a floating element within a modal box

I am trying to display some cards within a Bootstrap modal form. Inside the modal, I want the cards to appear in two columns by using the "col-md-5" class. .mycard.col-md-5 card contents However, when I use the "col-md-5" class, it adds a property o ...

htmlcsstwitter-bootstrap-3frontend

Enhance the appearance of the web page in your Windows Phone by incorporating CSS into the WebBrowser

Is it feasible to include a "position:fixed" style to the <header> in the app that showcases website pages using a WebBrowser control? This adjustment can be made via inline styling or by utilizing an external stylesheet saved within the resources ...

csswindows-phone-8browserwindows-phone

Liquid 960: Bizarre Alpha/Omega Phenomenon

Currently, I am working with Fluid 960 and encountering some unexpected behavior with alpha/omega. Typically, I utilize alpha/omega to adjust left and right margins within nested grids. Oddly enough, when I use alpha/omega on a set of nested grids, the gr ...

css960.gsfluid-layout

Customize HTML styles using Angular Material

I've noticed that my index.html file has a lot of style elements when using Angular Material, and I'm not sure why. Here's an example in the header element where different classes are used for Angular Material components. https://i.sstatic. ...

cssangularjsangular-material

Struggling to align navbar-brand perfectly in Bootstrap 5.1.3 framework

Looking for some web development assistance here! I'm currently working on a navigation bar using Bootstrap 5.1.3 and I'm facing an issue with centering "Postal Office". Despite trying mx-auto, it seems to be pushing out to the right. Any suggest ...

cssbootstrap-5

Currently, I am encountering a problem as I attempt to iterate through a dynamic table

I have a table containing various elements. An example row is Jack Smith with multiple rows like this: col1 col2 col3 col4 col5 col6 col7 col8 jack smith 23 Y Y error error_code error_desc The table is ...

javascripthtml

Animating images with Jquery

As a beginner in Javascript and Jquery, I am currently learning about image animation. However, I have encountered a question regarding moving an image from bottom left to top right within the window. Is there a more efficient way to achieve this compared ...

javascripthtmljquery

The footer seems to be losing its stickiness and not staying at the bottom when I

My goal is to create a sticky footer for my webpage. Once you click the add new sports button, a drawer slides out and the footer remains fixed at the bottom. However, as I scroll down the page, the footer moves up instead of staying in place. I have tried ...

javascripthtmlcssreactjsmaterial-ui

What could be causing my HTML elements to shift position based on varying screen sizes or zoom levels?

Does anyone else experience their HTML and CSS elements shifting around based on the screen size or zoom level? I have screenshots illustrating this issue. Here is how it currently appears And here is how it's supposed to look ...

javascripthtmlcssiframebrowser

Separating the rules for development and production modes in the webpack configuration file

I'm currently in the process of working on a front-end project using HTML. Within my project, I have integrated the Webpack module bundler and am utilizing the image-webpack-loader package for image optimization. However, I've encountered an issu ...

javascripthtmlnode.jswebpackwebpack-dev-server

add all elements to the table except for the final one

​<table id="table"> <tr><td>one</td><td>two</td></tr> <tr id="sum"><td>sum</td><td>sum2</td></tr> </table> ​<span id="add">add new</span> ...

javascriptjqueryhtml

The button will continue to be enabled even if the textfield is empty

I have a task to implement a feature on a webpage where the submit button should remain disabled until all values are entered in the textbox. However, I am facing an issue where the submit button is already active when the page loads. .directive('pas ...

javascripthtmlangularjs

Adjustable image within a div based on the length of the title when viewed in Edge browser

I am facing an issue with a div element. Here is the code snippet: <div fxLayout="column" fxLayoutGap="20px"> <h1 class="mat-display-1">Welcome to $TITLE$</h1> <img *ngIf="logoData" [src]="logoData" class="logo" alt="logo"/> &l ...

htmlcssangular

Exploring the depths of CSS line-height

Have you noticed the difference in line height between these two paragraphs on Safari and Chrome? Shouldn't the default line height be 1.0, representing the "natural" height of a particular font (where descenders from the line above do not clash with ...

htmlcssgoogle-chromesafariwkwebview

Customize dropdown item colors in React using a color picker

I am currently utilizing a react color picker to create a personalized 16 color gradient. The process involves selecting a color from a dropdown menu and then using the color picker to make adjustments. This action updates an array that dictates the stylin ...

javascripthtmlcssreactjsreact-native

Implementing a CSS codepen within a React Material-UI component

I'm struggling to implement this effect on my material ui card component using react and makeStyles. I am having difficulty translating this effect to the cards, could someone assist me in simplifying it into a CSS code that can be used in MakeStyles? ...

cssreactjsmaterial-uicodepen

Navigate to the initial visible element on the specified webpage via the page hash link

In my handlebars HTML template, I have a partial view that includes different pieces of content for desktop and mobile. I use different CSS classes to hide and show these elements accordingly. <div class='hideOnMobile showOnDesktop'> < ...

javascriptjqueryhtmlcss

Is it possible to restrict the movement of the dialog to stay within the boundaries of the window

html: <div id="dialog" title="Past Issues"> </div> Jquery: $( "#dialog" ).dialog({ height: 900, width:1200, modal: true, }); Currently facing an issue where the dialog can be dragged outside of the window are ...

javascriptjquerycssjquery-uidialog