Resolving problems with the positioning of the navigation bar

I am in the process of creating a simple website, but I am encountering an issue with the menu bar shifting below the "Contact for Services" section when I view the page in different resolutions.

Is there a way to lock the position of the menu bar so that it stays in place when the browser width changes instead of dropping down?

My goal is to achieve a layout similar to this:

HTML

<body>
<!-- ############### -->
<!-- OVERALL WRAPPER -->
<!-- ############### -->
<div class="head_wrapper">
    <!-- HeaderBarMain -->
    <div class="header">
        <h2>Contact for services questions on: ####</h2>
        <!-- Contact Information -->
        <!--<div class="contact">-->
        <!-- </div><!-- END contact -->
        <!-- Navigation menu -->
        <div class="navMain">
        <!-- Menu List -->
          <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </div><!-- END navMain -->
    </div><!-- END header -->
</div>
</body>

CSS

.head_wrapper {
    width:100%;
}
.header {
    background: #717171;
    height: 60px;
    width: 100%;
    margin-top:0px;
}
.navMain {
    float:right;
    margin:15px 50px 28px 0px;
}
.navMain ul {
    margin: 0px 0px 0px 10px;
    padding: 0px;
}
.navMain ul li {
    margin: 0px;
    padding: 0px 20px;
    list-style:none;
    display:inline;
}
.navMain ul li a {
    margin: 0px;
    padding: 0px;
}
.navMain ul li a:hover {
}
.header h2 {
    margin: 20px 30px 5px 440px;
    font-size:12px;
    float:left;
    color:#FFFFFF;
}

Answer №1

To prevent your navigation bar from stretching, it is advisable not to use percentages as units.

Check out this example: http://jsfiddle.net/dgrxU/

In the example, I adjusted the width of the head-wrapper and header to 1024 pixels.

If you need to control the size for various devices or screen resolutions, you can utilize media queries.

Explore more about media queries here: http://mediaqueri.es

I hope this information proves to be helpful for you.

PS: Apologies for the inability to include hyperlinks in this system.

Answer №2

If you'd like to prevent the nav from dropping, simply assign a min-width of 960px to the head_wrapper so that the inner elements do not collapse.

.head_wrapper {
    min-width:960px;
    width: 100%;
}

The issue with your code lies in giving the .header h2 a margin-left: 440px, causing the nav to drop. The head_wrapper acts as a container with a width of 100%, meaning it is screen size dependent. As the screen size changes, the inner elements, defined in px, become compacted due to space constraints. To resolve this, assign a static width to the container. Alternatively, if you prefer a fluid and responsive design, avoid using px and utilize media queries in your CSS. You can also refer to resources on creating a responsive navbar like this.

Check out this Fiddle

Best of luck!

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

css media queries not taking precedence over default styles

Struggling to find a solution as no similar case was discovered!! To avoid adding a class name for each page, I am eager to utilize a generic class name as shown below: <div id="news"> <div class="news column">content 1</div> &l ...

"Discrepancy found in results between Node-Fetch POST and Firefox POST requests

I have encountered a challenge while trying to replicate a successful log-in process on a website using node-fetch after being able to do so with Firefox. The login process consists of three stages: Visiting /login which returns a sessionToken from the we ...

Altering the href text within a script causes the text to disappear instead of updating

Function Triggered by Button Click: function LoadEnglishText() { document.getElementById("txt_whatwedo_learnmore2").innerHTML = "here."; } HTML Link to be Updated: <a id="txt_whatwedo_learnmore2" href="./pdf/Pricing_App_Dev_2019_Ger.pdf">hier ...

HTML is meant to contain PHP code, but in this case, it is not

Although I am new to PHP, I did some research and found a way to display a PHP Variable within HTML (in this case, it's an h1 element) if($current_month != $old_date) { $test = the_date( 'F' ); echo '<h1>'.$test.&apos ...

What is the best way to adjust the size of the circles in my d3 leaflet implementation based on the frequency of longitude/latitude pairs?

I'm currently diving into the world of d3 and attempting to create a map using leaflet. Within my dataset, I have thousands of latitude and longitude coordinates. While I've successfully plotted circles on a leaflet map in d3, I'm now faced ...

Turning off font ligatures in CSS (letter connections deactivation)

Typically, modern web browsers will automatically merge certain letter combinations, such as 'f' and 'i', into a single character known as a ligature. While this can enhance readability, it may not always align with a designer's pr ...

Creating a unique look for unordered list items in a dropdown navigation

I'm currently working on creating a drop-down menu using nested unordered lists. The functionality of the menu is all set, but I'm running into some styling issues. The main link that triggers the drop-down should have a blue background with whit ...

Set the height of the vertical scroll at a fixed 100% floatValue

Check out my creation at http://jsfiddle.net/ZygnV/ html, body { margin: 0; padding: 0; height: 100%; } .main-content-wrapper { height: 100%; overflow-y: hidden; white-space: nowrap; } .main-sidebar { display: inline-block; height: 1 ...

What happens when a PHP field is left empty?

I have created 3 PHP files. The first file contains fields to be filled out, similar to an HTML form. The second file takes the data from the first file and saves it in a text file with the title as the date and time. The third file confirms the registrati ...

Creating a Form with Dynamic HTML when Button is Clicked

I have been working on enhancing the functionality of my website app located at , but unfortunately, I have not been successful so far. My goal is to introduce a vendor information form with just one click of a button and then enable users to add products ...

Activate jquery to initiate the login modal

I am having trouble getting the login modal to appear using jQuery. I can't seem to figure out why it's not popping up. You can check a similar question here and I followed the answer but still no luck. <script> $(document).ready( ...

What steps can I take to make this menu more leisurely?

I've been experimenting with creating a horizontal menu using HTML and CSS. <section class="latest-albums-area section-padding-100"> <div class="container"> <div class="row"> ...

How can I shift an element without adjusting the padding to prevent border or margin collapse?

Is there a way to move HTML elements without the use of padding, as I need a border for color and want to avoid collapsing with other elements in the structure? Or is this the only option and should I just avoid colliding with other elements? "Margin is t ...

Dynamic stylesheet in Vue component

Currently, I am utilizing a Vue component (cli .vue) and facing the challenge of selectively displaying my stylesheet based on a boolean value. To put it simply: When myVar==false, the component should not load its styles. <style v-if="myVar" lang="sc ...

Retrieve a result following an AJAX post request to utilize the obtained value in subsequent code functionalities

Below is the code snippet where an "if" statement is used to check if a query has been executed correctly. If it has, a part of the script is stored in a variable called $output. This variable is then immediately read by the notification script included in ...

HTML forms default values preset

I need help with pre-setting the values of a dropdown menu and text box in an HTML form for my iPhone app. When the user taps a button, it opens a webview and I want to preset the dropdown menu and text field. Can someone guide me on how to achieve this? ...

Issue with margin:auto in Internet Explorer 5

I have been experimenting with IE11's developer tools and discovered that when changing the browser mode, everything appears as expected in Edge, 10, 9, 8, and 7. However, in IE5, the div is forced to align to the left instead of the middle. Could so ...

Align the <div> vertically within the <td> tag

My current set up looks something like this: <tr> <td> <div class="blue">...</div> <div class="yellow">...</div> </td> <td> <div class="blue">...</div> <div class="yellow ...

position property in div element disrupts slider functionality

I've been working on incorporating a simple slider into my website and stumbled upon this example on jsfiddle My goal is to have the slider positioned "relative" within my site, but when I change the CSS to position: relative;, the slider no longer ...

ng-bind-html not refreshed following ng-click triggering

Recently, I started learning about the MEAN stack. I have implemented an ng-repeat in my HTML code that displays a list of titles. Each title has an ng-click function attached to it, which is supposed to show more details in an overlay popup. blogApp.co ...