Comparing Horizontal and Vertical Navigation Bar Layouts Depending on Screen Size

I am currently revamping a friend's website and trying to reduce the amount of white space on larger screens. One idea I have is to switch one of the static nav bars from horizontal to vertical on larger screens, and then back again to horizontal on smaller screens. I am unsure about what code would be required to achieve this effect. Can it be done using only CSS or would JS/C# be necessary?

I have already created both versions of the navbar, so it's just a matter of determining when each should be displayed. Please refer to the attached photos.

https://i.sstatic.net/cQ5KF.png

c#htmlcssasp.netasp.net-mvc

Answer №1

If you're grappling with creating a responsive navbar, I have a top recommendation - utilizing flexbox and media queries.

Check out this insightful article on CSS-Tricks

To achieve a horizontal navbar layout, employ flex-direction: row; for vertical navigation, opt for flex-direction: column. Easily switch between the two using a media query that adjusts based on screen width. Here's an example snippet of the media query code:

.navbar {
  display: flex
}

/* For screens up to 992px wide, switch navbar to vertical */
@media screen and (max-width: 992px) {
  .navbar {
    flex-direction: column;
  }
}

Explore additional media query examples on W3Schools

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

Error: Collision detection in Three.js console output

I am attempting to create a collision detection system using Three.js (a WEBGL library). However, I keep encountering an error stating "cannot call method multiplyVector3 of undefined". Is there anyone who can help me identify what I may be doing incorrec ...

htmlwebthree.jswebgl

Tips for aligning two divs on top of each other

I'm trying to figure out how to have divs start drawing from the same point. Essentially, I want to be able to add new divs and have them appear stacked on top of each other, so that they can all move together based on a single reference point. Here& ...

csshtml

Why does my Timer keep looping?

My Timer is set to trigger an event every 1900 ms, but I noticed that when I stop it and start it again, the event fires twice. If I repeat this process, the event fires more times. How can I prevent this from happening? Thank you. public static ...

c#.nettimer

Object representing a dictionary of words and their meanings

Is it possible to loop through a dictionary that holds objects and enum types? foreach(Dictionary<someObject, enumType> myDic in myObjects) { if(enumType.myType == enumType.Type) { perform a specific action here... } } ...

asp.net

JavaScript code that triggers a page refresh when an input is added to a form without actually inputting

Upon delving into extensive research on this particular subject, I regrettably came up empty-handed. My sincere apologies if this question has been posed before. The task at hand involves creating a form that prompts users to input information about four ...

javascripthtml

Steps to create a styled text area in your code

Hello everyone, I am currently working on an application where the admin can input text into a text area, which will then be displayed to the logged-in users. My issue is that if the admin copies code from editors like Eclipse or IntelliJ IDE, I want t ...

csshtml

What is the best way to adjust the fontSize of text within a table using Material UI?

In my Material UI table, I am attempting to adjust the fontSize of the contents. However, when I try to modify it using the style={{}} component, the changes are not being applied. <Grid><Typography variant="body1">Fiscal Year </Typography&g ...

cssreactjsmaterial-uiformsy-material-ui

XPath Selector Error: Invalid Selection

It's puzzling to me why I keep encountering an error with my XPath syntax in this specific scenario: The provided selector /*/tbody[@id='custContainer']/tr/td/a(starts-with(@href, 'Customers/') seems to be either invalid or does n ...

c#.netxmlxpathselenium

How to properly format an HTML input box for numeric entry and ensure correct formatting of the minus sign

I need assistance with formatting an HTML text input box to only accept numeric values using JavaScript. Specifically, the input should allow digits, a minus sign, or a dot/comma (which will be converted to a dot). However, I want to prevent multiple conse ...

javascripthtmlinputuser-input

Can the mvc-mini-profiler be utilized with typed datasets in a project?

Recently, I've been exploring the usage of mvc-mini-profiler on an ASP.NET website and have found that all request profiling features work seamlessly. However, I am now looking into incorporating it into our database calls. Currently, all database op ...

asp.netmvc-mini-profiler

Retrieving the identity value using Scope_identity() within a series of SQL client commands

Whenever I need to retrieve the correct scope_identity() value after inserting records, I typically resort to using a stored procedure. However, there's now a requirement for me to obtain the id field of an inserted record when utilizing SqlClient. M ...

c#sqlsqlclientscope-identity

Strange behavior exhibited by ngMessage in AngularJS when used with input of type "email"

I recently came across an article on transitioning from using ngModel.$parsers and ng-if to ngModel.$validators and ngMessages by Todd Motto on his blog. Intrigued, I decided to migrate from using ng-if to ng-messages in my code. However, I encountered a s ...

javascriptangularjshtmlvalidationhtml-input

Selenium tests automatically launch Internet Explorer quietly on the TFS build server

We are currently utilizing Selenium for testing our MVC application. While everything runs smoothly on localhost in VS2017, the tests successfully open IE, execute the test, and then close the browser. However, on the TFS build server, a peculiar issue ar ...

c#seleniuminternet-explorertfs

Resizing the width to fit truncated content

When displaying text within a span element inside a fixed-width structure, I want to use ellipsis if the text overflows. To show the full text, I have initialized a Bootstrap tooltip in these elements. However, the tooltip is visually misplaced due to the ...

htmlcss

Crafty Checkbox Selector [ leveraging jquery ]

I have created some fake checkboxes using elements like <span> after the real checkbox and they are working fine! However, I am having trouble counting the checked checkboxes when a checkbox is clicked. I have tried using methods like: $(".elm:chec ...

javascriptjqueryhtmlcss

The function TagBuilder.MergeAttributes is malfunctioning

My attempt at creating a custom helper in MVC is not working as expected. The custom attributes are not being added to the HTML: Custom Helper Function public static MvcHtmlString MenuItem(this HtmlHelper helper, string linkText, string actionName, strin ...

c#asp.net-mvchtmltagbuilder

What are the reasons for not accessing elements in a more "direct" way like elemId.innerHTML?

Recently, I came across a piece of JavaScript code that accesses HTML elements using the shorthand elementID.innerHTML. Surprisingly, it worked perfectly fine, but interestingly, most tutorials opt for the traditional method of using document.getElementByI ...

javascripthtmldom

What steps should I take to ensure my navbar functions correctly?

I have recently designed a responsive navigation bar for my website, but I am encountering an issue. When the user reduces the browser size and tries to click the hamburger icon on the side, the navbar does not work as expected. The user needs to refresh t ...

javascripthtmljquerycssbootstrap-4

Assigning a specific width to a div element will override the float property of the div

I encountered an issue while trying to position the divs titled "menu" and "content" side by side. Initially, they were placed correctly until I decided to set their width using % instead of px. After making this adjustment, the 'float: left;' pr ...

htmlcsswidth

What is the correlation between statistics and posts that are generated dynamically?

One interesting aspect to consider is how statistics are connected to individual posts. For instance, linking the like count to each Facebook post or tying upvote and downvote stats to a question on Stackoverflow presents some intriguing challenges. How ...

phpjavascripthtmlajax