Effortlessly sleek horizontal navigation bar designed with Liquid CSS

I've been exploring online tutorials to create a responsive horizontal drop-down menu navigation bar using just CSS and HTML. The tutorial process has been smooth so far, but I'm aiming to make my navigation bar fluid so that it adjusts seamlessly to different browser sizes while maintaining its horizontal layout.

I've read about achieving this through fluid CSS by utilizing percentages (%) and ems instead of fixed pixel widths. Despite several attempts, I haven't been successful in making my navigation bar truly fluid. Can someone offer guidance on how to achieve this with fluid CSS?

Below is the snippet of my HTML code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Casa Magnolia Home Page</title>
    <link rel="stylesheet" type="text/css" href="css/homePage.css"/>
</head>
<body>
    <div id="wrapper" align="center">
        <div id="header" align ="left">
            <?php

                include "ImageFunctions.php";//include the PHP class 

                //create an object of the class so that its methods can be accessed
                $myImageFunction = new ImageFunctions();
                $logo = $myImageFunction->logo();
                //$data= $myImageFunction->getData();

            ?>

        </div>
        <div id ="menuWrapper" align="left">
            <div id ="navMenu" align="center">
                <ul>
                    <li><a href="#">Home</a></li><!-- end Home link -->
                    <li><a href="#">The House</a>
                        <ul>
                            <li><a href="#">Info</a></li>
                            <li><a href="#">Map</a></li>
                            <li><a href="#">Slide Show</a></li>
                        </ul>
                    </li><!-- ends the House info list -->

                    <li><a href="#">The Area</a>
                        <ul>
                            <li><a href="#">Map</a></li>
                            <li><a href="#">Info about the area</a></li>
                            <li><a href="#">Sites and Attractions</a></li>
                            <li><a href="#">Web Address</a></li>
                        </ul>
                    </li><!-- ends The Area info list -->
                    <li><a href ="#">Terms and Conditions</a>
                        <ul>
                            <li><a href="#">Payments</a></li>
                            <li><a href="#">Cancellation</a></li>
                            <li><a href="#">Security Deposits</a></li>
                            <li><a href="#">Smoking Policy</a></li>
                            <li><a href="#">Pets Policy</a></li>
                            <li><a href="#">Insurance</a></li>
                            <li><a href="#">Swimming Pool</a></li>
                            <li><a href="#">Pest Control</a></li>
                            <li><a href="#">Complaints</a></li>
                            <li><a href="#">Arrival/Departure</a></li>
                            <li><a href="#">Codes of Conduct</a></li>
                            <li><a href="#">Limits of Liability</a></li>
                        </ul>
                    </li><!-- end of Terms and Conditions list -->
                    <li><a href ="#">Book With Us</a></li><!-- end of Book with us Link -->
                    <li><a href ="#">Help</a>
                        <ul>
                            <li><a href="#">Contact Us</a></li>
                        </ul>
                    </li><!-- end of Help list -->
                </ul> <!-- end main UL -->
                <br class="clearFloat" />
            </div><!-- end navMenu div -->
        </div> <!-- ends the menuWrapper div -->


    </div>
</body>

And here is the corresponding CSS code:

/* 
Document   : homePage
Created on : 16-Feb-2012, 17:00:56
Author     : gerrard
Description:
    Purpose of the stylesheet follows.
*/

@charset "utf-8";

#header 
{ 
width: 100%;
height: 50px;
float: top;
background-color: beige;
margin:20px;

}


#menuWrapper
{
width: 100%;
height: 100%;
background-color: yellow;
margin: 10px;
}


#navMenu
{
width:100%;
height:100%;
float: center;
margin: 0;
padding: 0;
}


#navMenu ul
{
margin: 0;
padding: 0;
line-height: 30px;
}

#navMenu li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background: orchid;
}

#navMenu ul li a
{
text-align: center;
font-family: "Comic Sans MS", cursive;
text-decoration: none;
height: 40%;
width: 230px;
display: block;
color: yellow;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000;
}

#navMenu ul ul
{
position: absolute;
visibility: hidden;
top: 32px;
}

#navMenu ul li:hover ul
{
visibility: visible;

}




/********************************************************************************/

#navMenu li:hover
{
background: visible;   
}

#navMenu ul li:hover ul li a:hover
{
background: violet;
color: silver;
}

#navMenu a:hover 
{
color: peachpuff;
}

.clearFloat
{
clear: both;
margin: 0;
padding: 0;
}
htmlcss

Answer №1

Appreciate the question.

Feel free to take a look at this Fiddle I put together --> http://jsfiddle.net/HerrLoop/FxNsj/

Key modifications made include:

-eliminating the fixed width on the 'a' tags

-assigning a 100% width to all navigation list items (li's)

-setting a width of 16% for all primary navigation list items within nav > ul > li (this override applies only to primary nav items)

#navMenu > ul > li {
width:16%;
}

-ensuring that all second-level navigation links have a 100% width

This solution may not be flawless, but hopefully, it provides some assistance.

Take care!

Answer №2

One effective solution would be to employ Media Queries in order to achieve a fluid layout

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

Hover over with your mouse to open and close the dropdown menu in React JS

Just starting out with React JS and encountering a small issue. I'm trying to make the menu disappear when the mouse leaves that area, so I used onMouseOut and onMouseLeave to close it. However, I noticed that having these options in place prevents th ...

javascripthtmlcssreactjsmaterial-ui

Creating a fieldset and form in HTML code involves using

I encountered a strange issue recently. I had set up a form in HTML to send data to my PHP script, and everything was functioning correctly. However, the design looked a bit messy without margins, so I decided to make some CSS adjustments. After applying s ...

phphtmlfieldset

Show unique language text in the <noscript> element based on the user's browser language

I am just starting out with HTML, and I would like to show a message if JavaScript is disabled. To do this, I have placed the message within the <noscript> tag, which is working perfectly. <noscript> Need to enable Javascript. </noscript> ...

javascripthtml

How can I pass the color hex value from the controller to the view without using quotation marks?

I'm having trouble sending a value and color pair using JSON. The color value needs to be returned to the JavaScript in the view as color: "#FFFFFF". I can send it to the view that way, but once the browser reads it, it turns into color: &quot;#FF ...

c#javascriptjsonhtmlasp.net-mvc-4

Encountering issue with Django locating static file (1.5) showing ERROR 404 code 1649

I'm facing some difficulties in setting up my local Django site. I've reviewed the previous questions and answers, but haven't been able to find a solution. [20/Oct/2013 03:56:33] "GET /rides/ HTTP/1.1" 200 230 [20/Oct/2013 03:56:33] "GET / ...

pythoncssdjangoweb-applications

Obtain the form value upon submission without the need to reload the page

I am facing an issue where I have a form and I want to trigger the display of a div (in the same page) and execute a JavaScript function upon clicking submit, all without causing a page refresh. <form action="#" method="post" name= "form1" id = "form ...

javascriptphphtmlajax

Content in TinyMCE styled with the default CSS of the application

Hello fellow developers; I'm struggling to find a suitable solution to apply the same styles from our main CSS file to the text entered in the TinyMCE editor. Just to clarify, I don't want to alter the overall theme or appearance of TinyMCE itse ...

javascripthtmlcsstinymcetinymce-4

Horizontal scroll through Bootstrap 4 navigation tabs

I'm currently using the newest Bootstrap 4 nav-tabs feature to create tabs and I'm aiming to keep all the tabs in a single horizontal line that can be scrolled. I've attempted to use various JavaScript plugins, but none of them seem to func ...

htmlcsstabsbootstrap-4

Ways to optimize view caching to prevent unnecessary file reads and rendering

My current code includes multiple view render calls: router.get('/mcn', (req, res) => { res.render('product/mcn', { layout: 'product/layout', contactKey: 'mcn' }); }); router.get('/agency', (req, res ...

htmlnode.jsexpresspugserver-rendering

Chrome is not storing the CSS file in its cache memory. However, it is successfully caching .js and .png

I have noticed that the CSS file is not being cached in the Chrome browser. My application is created using Angular-CLI and all the necessary cache-control headers are set, with an Expires header of 5 minutes: Accept-Ranges:bytes Cache-Control:max-age=600 ...

cssgoogle-chromehttp-caching

Create a div element within the parent window of the iFrame

I'm trying to figure out how I can click a button within an iFrame that contains the following code: <td class="id-center"> <div class="bs-example"> <a id="comments" href="comments.php?id=$id" name="commen ...

javascriptjqueryhtmliframe

Is there a way to incorporate an MTN Momo or Orange Money payment system into your application if you are not a registered business entity?

Implementing an MTN Momo and Orange Money payment system through their respective APIs is crucial. In addition, I am seeking a dependable and effective method to seamlessly integrate these diverse APIs. During my attempt to incorporate the API via their ...

javascriptpythonphphtmlcss

JavaScript visibility disappearing intermittently

I have created a custom image viewer box that overlays a thumbnail gallery page. The image viewer should appear when a user clicks on a thumbnail. However, currently, the viewer only pops up briefly and then disappears again. I am looking for a way to mak ...

javascriptcssvisibility

Automatically Scrolling Div According to its Content

Struggling to figure out how to make a parent div automatically scroll based on its child's content. I have a menu that expands when clicked and needs to scroll if the height of the child exceeds that of the parent. This is the HTML for the menu wra ...

htmlcssscrolloverflow

Click Event for Basic CSS Dropdown Menu

My goal is to develop a straightforward feature where a dropdown menu appears below a specific text field once it is clicked. $(".val").children("div").on("click", function() { alert("CLICK"); }); .container { display: inline-block; } .val { d ...

javascriptjquerycss

Conditional statement in Javascript for document.cookie

I am attempting to create a basic if statement that relies on the value of a cookie. The function looks like this: function setHomePage() { if ($.cookie('settingOne') == 'jjj') { $('.secO').css('display', & ...

javascripthtmlif-statementcookies

HTML stops a paragraph when encountering a script within the code

Everything in my code is working correctly except for herb2 and herb3, which are not displaying or utilizing the randomizer. I am relatively new to coding and unsure of how to troubleshoot this issue. <!DOCTYPE html> <html> <body> ...

javascripthtml

Arranging div blocks in columns that are seamlessly aligned

I am dealing with a situation where I have several boxes or blocks arranged in a 3-column layout. These boxes are styled using properties like float: left, width: 33%, but they have varying heights. Is there a way to make sure that the boxes always fill i ...

jqueryhtmlcssgrid-layout

Load CSS stylesheet depending on Internet Explorer document mode

As I work on my website, I am facing the challenge of incorporating different versions of my style sheet based on the browser's document mode, not the browser mode. For instance, if the documentmode = ie8, I may need to load main_ie8.css, whereas for ...

javascripthtmlcssinternet-explorerinternet-explorer-9

Placing an absolutely positioned element on top of other elements

Currently, I am working on a frontendmentor website and encountering difficulty in positioning the shopping cart div above all the other elements. Initially, I attempted to use z-index for this purpose, but it seems that it does not work with elements havi ...

javascripthtmlcss