The art of styling <li> elements compared to <a> elements

While these inquiries may lean towards being subjective, I am interested in learning about the industry's generally accepted best practices:

1) With responsive design and collapsible menus becoming more common, should a nav or nav menu element be styled with a fixed height?

2) When styling the nav, is it preferable to style the li or the a surrounding the link? Or is this simply a matter of personal preference?

Answer №1

Here's my take on the question that leans towards personal preference:

1) With the advancements in responsive design and collapsing menus, should a fixed height be applied to the nav or nav menu element?

In my opinion, why not? Even Google incorporates a toolbar with fixed heights (64px in large screens, 56px in smaller screens) in their Material Design.

2) When styling the navigation, is it more beneficial to style the li elements or the anchor tags around the links, or is it simply up to personal choice?

This aspect tends to vary based on individual preferences. For example, Bootstrap tends to prioritize styling a tags over li elements according to their documentation, while Material Design Lite opts for not utilizing anchor tags at all as shown in their components guide.

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

Performing mathematical calculations using javascript

In my project, I'm utilizing HTML, CSS, and JavaScript to achieve the following: Dropdown menu for Category (Coffee Appliance) Dropdown menu for Product (Keurig Coffee Maker) Wattage: 1500kWh (auto-filled from Local Storage) Daily Energy Con ...

Populating Dropdown list with values based on input provided in Textbox

Can you assist me in finding the solution to this issue? I have a TextBox and a DropDown list. For example, if I type "Anu" into the textbox, I want it to populate the dropdown list based on the text entered. How can I achieve this? I am working with vb. ...

The @mouse-down event in Vue does not seem to be firing

I'm new to web development and I'm having some issues with Vue. I learned from a tutorial that I can use @click when a button is pressed, and it works fine. Now I want to create a simple mechanism to detect when the mouse is clicked and released ...

Is there a way to keep the text animation going even when I'm not hovering over it with the cursor?

Is there a way to make text continue animating on the page even when the cursor is not placed on it? I understand the hover function, but how can I ensure the text keeps animating without interruption? $(document).ready(function () { $("#start&q ...

Is there a way to incorporate a click function into this code if the id and xpath methods are ineffective?

Check out the code snippet below: <div class="btn-group" style="margin-top: -10px; box-shadow: none !important;"> <a class="btn btn-clear store-name headerActive" style="margin-left: 0px !important;" ng-click="account();" _href="#/app ...

Ways to eliminate the white overlay that occurs on the page after clicking the scroll top button

Hi there! I've been busy with updating my site at , and noticed a small glitch. Every time I hit the Back to Top button at the bottom of the page, the screen goes white. Any ideas on how to fix this issue? Thanks in advance! ...

Tips for customizing the CSS of a child component that has been imported from a different module in Angular 2

I have been using agm-snazzy-window from amg-snazzy-window There is a mention that I can modify the css class, but when I try to do so, it doesn't seem to work. Here is an example: map-component.html <agm-snazzy-info-window [closeWhenOthersOp ...

Adding margin to an HTML element causes the entire page to shift downward

Despite successfully applying margin to other elements, I encountered an issue with #searchbarcontainer where it causes the entire page to shift downward. My goal is to center it slightly below the middle of the page, but I'm struggling to find a solu ...

Stopping setTimeout when leaving the current page: Is it possible?

Good evening, I am looking for advice on how to cancel a setTimeout function when a user navigates to other pages (for example, by clicking other links or pressing the back button in the browser, but not by changing tabs). I have attempted to use the windo ...

Adjust choices in a dropdown menu based on the selection of another dropdown menu

I am attempting to create a scenario where selecting an option from one dropdown list will dynamically change the options available in the next dropdown list. You can find my code on jsfiddle <!DOCTYPE html> <html> <body> &l ...

Dynamic flexibility for content scrolling across components

Creating a mobile-friendly terms of service page with a title, content, and two buttons is my current project. The specific requirements are: All components should not exceed 100% of the viewport to allow for scrolling The buttons need to stay sticky at t ...

element obscured by overlapping elements

I'm unsure why this issue is occurring; it seems to be a CSS error, but I can't pinpoint the exact location. Working on this in Rails, so I'm relatively new to it, but it should follow standard CSS practices! The "ticket" element appears t ...

Styling a Pie or Doughnut Chart with CSS

I am working on creating a doughnut chart with rounded segments using Recharts, and I want it to end up looking similar to this: Although I have come close to achieving the desired result, I am encountering some issues: Firstly, the first segment is over ...

What could be causing my col-x to not function correctly in Bootstrap?

I am trying to modify my Bootstrap navbar by adding a Login button, but I encountered an issue. When I use col-x classes inside the navbar to separate elements equally, they only cover 50% of the width and no more. However, using col-x classes outside the ...

Troubleshooting common issues with PHP's simple HTML DOM parser

I've encountered an issue while working on a scraper for a website that involves crawling through links. The error message I'm receiving is as follows: PHP Fatal error: Uncaught Error: Call to a member function find() on null in D:\Projekti ...

Controlling MYSQL data is not possible

When I retrieve data from the database, everything is functioning correctly, but the data flow seems uncontrolled. Here is a snippet of my code... <?php session_start(); include 'conn.php'; include '../includes/layouts/header.php'; ...

Passing parameters from an HTML form using PHP

I have a background in C# and am still relatively new to PHP. I have an HTML form that submits its values to the PHP file below, but for some reason, the values are not being set. Can you help me identify what I'm doing wrong? <?php include(' ...

Having trouble retrieving values from multiple checkboxes in HTML

I have a HTML table displaying all the items from my SQL database. Each item has a checkbox that is supposed to pass the value of the item name to the calculation route when the submit button is pressed. However, the issue is that the submit button only ...

Counting checkboxes in jQuery version 1.9

I recently upgraded my website from jQuery 1.6 to jQuery 1.9.1, and now some of my old code is not working as expected. Specifically, I have a piece of code that handles checkboxes in table rows, allowing only up to 5 checkboxes to be active at once and di ...

jQuery code unable to alter the class of a div

Need help with a script on my single page site that adds a "read more" style link to a content area's div. The goal is for the button to change the class of the content area when clicked, showing all of the content. Clicking again should hide the cont ...