Breakpoint for mobile menu in FoundationCSS

When the browser is resized, the mobile menu appears at 568x320, which is the default breakpoint.

https://i.sstatic.net/ZSbiq.jpg

I would like to create a breakpoint around 900px to address the issue with the menu being too large as shown in the image below. However, I am unsure of how to do this despite spending 5 hours trying. Any assistance would be greatly appreciated. Link to Fiddle. Thank you.

<nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
        <li class="name">
            <h1><a href="#">My Site</a></h1>

        </li>
        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a>

        </li>
    </ul>
    <section class="top-bar-section">
        <!-- Right Nav Section -->
        <ul class="right">
            <li class="has-dropdown"> <a href="#">Right Button Dropdown</a>

                <ul class="dropdown">
                    <li><a href="#">First link in dropdown</a>

                    </li>
                    <li class="active"><a href="#">Active link in dropdown</a>

                    </li>
                </ul>
            </li>
        </ul>
    </section>
</nav>

https://i.sstatic.net/SRy9Q.jpg

jquerycssjquery-mobilezurb-foundation

Answer №1

After struggling to find a solution in .scss when I needed something for plain .css, I finally came up with this:

@media only screen and (max-width: 64.063em) {
    meta.foundation-mq-topbar {
        font-family: "/only screen and (min-width:64.063em)/";
        width: 64.063em;
    }

    .top-bar {
      overflow: hidden;
      height: 2.8125rem;
      line-height: 2.8125rem;
      position: relative;
      background: #333;
      margin-bottom: 0;
    }

    .top-bar-section {
      left: 0;
      position: relative;
      width: auto;
      transition: left 300ms ease-out;
    }
    
    // Other styles omitted for brevity...

}

This modification addressed my specific concern about the breakpoint adjustment. I wanted to ensure that on smaller and medium-sized devices, the hamburger icon would be displayed at max-width: 64.063em, while larger screens would continue to show the regular navigation menu.

If you're facing a similar issue, feel free to check out the fiddle showcasing the updated code: https://jsfiddle.net/labanino/99sz3wt0/5/embedded/result/

Answer №2

Are you considering replacing your menu across all screens with a right-hand dropdown, or do you only want to remove it for specific screen widths? I'm assuming the latter, and that's what this example addresses.

Depending on your defined breakpoints, you can set up a secondary navigation menu for medium screens and utilize visibility classes to display the dropdown menu for screen sizes ranging from 900px to 1024px.

If you find yourself needing to tweak or establish new breakpoints, check out this helpful information.

An implementation may resemble something like this: Fiddle

<nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
        <li class="name">
             <h1><a href="#">My Site</a></h1>

        </li>
        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a>

        </li>
    </ul>
    <section class="top-bar-section">
        <!-- Right Nav Section -->
        <ul class="right show-for-medium-only">
            <li class="has-dropdown"> <a href="#">Right Button Dropdown</a>

                <ul class="dropdown">
                    <li><a href="#">First link in dropdown</a>

                    </li>
                    <li class="active"><a href="#">Active link in dropdown</a>

                    </li>
                </ul>
            </li>
        </ul>
        <ul class="right show-for-large-only">
            <li><a href="#">First link in dropdown</a></li>
            <li class="active"><a href="#">Active link in dropdown</a></li>
        </ul>
</section>
</nav>

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 there a AngularJS alternative to jQuery's .load() method?

How can this be achieved in AngularJS? angular.element('#container').load('http://google.com'); Important: This involves loading content from an external domain. ...

ajaxjqueryangularjs

Is there a way to organize a specific column based on user selection from a drop down menu on the client side?

When selecting Timestamp from the drop-down menu, I expect the TimeStamp to be sorted in either ascending or descending order. Similarly, if I choose Host, the Host should be sorted accordingly. Despite using the Tablesorter plugin, sorting doesn't s ...

javascriptjqueryhtmltablesorter

Is it feasible to create a doughnut chart with curved edges?

My goal is to create a doughnut chart, but my search for reliable CSS/SVG/Canvas solutions has not been successful. I want each segment to have fully rounded corners, which presents a unique challenge. ...

javascriptcsssvgchartshtml5-canvas

The pseudo element 'not' in CSS is currently not functioning as expected when applied to an anchor tag

When working with CSS, I encountered an issue while trying to apply a pseudo element on hover and active states of anchor tags. Unfortunately, my code was not producing the desired outcome. a:not(a[name="nobgcolor"]):hover{color:#ffff35;background-color:# ...

css

Version 2: "In case of an empty input field, the submit button should be

After experimenting with two different codes on my websites, I encountered an issue. The first code looked like this: $(document).ready(function(){ $('.sendButton').attr('disabled', true); $('#message').keyup(function ...

javascriptjqueryformsbutton

Using Lazy Load Plugin for jQuery to enhance Backbone.js functionality

I am working on a Backbone.js application using require.js and underscore.js. I am trying to incorporate the jquery lazy loading plugin with the Eislider banner. The Eislider banner was functioning properly before implementing the lazy loading script. Th ...

javascriptjquerybackbone.jsjquery-lazyload

How can I create a comment section using jQuery, Ajax, and PHP?

There are 50 pictures where you can either add or delete comments. What is the most effective way to implement this feature? 1) Should I create a separate form for each image, input the data, and then post it? (Would require creating 50 forms for adding c ...

phpjquerycomments

Excessive HTML and CSS overflow stretching beyond the boundaries of the page on the right

It seems like the issue lies with div.ü and div.yayın, as they are causing overflow on the right side of the page. When these elements are removed, the overflow issue goes away. Are there different positioning codes that can be used to prevent this? d ...

htmlcss

Transmission of ARGB SignalR data from the server to the client

Seeking advice on how to efficiently transfer a set of ARGB values from a C# SignalR server to a JS SignalR Client. To clarify, what is the most efficient method to send a collection of ARGB values from C# to Javascript without using multiple loops? Than ...

c#javascriptjquerysignalr

Updating the contents of a DIV element in a Django application

Seeking a solution to replace the current contents of a DIV with new contents using Ajax GET method. Issue is that the entire page is loading into the DIV instead of just the desired content. function updateContent(){ var data = $('#Data ...

javascriptjqueryhtmlajaxdjango

Column Reordering in DataTable Causes Data to be Mapped Incorrectly

I have created a JSBin where you can view the code. However, due to CORS policy restrictions, the ajax URL I used is not functioning properly. The output generated shows that the data is mapped incorrectly in the columns. Can someone please help me figure ...

javascripthtmljquerydatatables

What is the best way to reveal and automatically scroll to a hidden div located at the bottom of a webpage?

Whenever the image is clicked, I want to display a hidden div with effects like automatically scrolling down to the bottom This is what my code looks like: $(document).ready(function() { $('#test').click(function() { $(&apos ...

javascriptjqueryhtmlcsscodeigniter

What is the process for choosing every child (regardless of level) of a parent using jQuery?

Is there a way to unbind all elements from a parent node using jQuery? How can I effectively select all children, regardless of their nesting level, from a parent node? I attempted the following: $('#google_translate_element *').unbind('c ...

javascriptjqueryhtmldom

Doesn't seem like jQuery's .blur() is responsive on dynamically created fields

I am currently designing a login form that includes a registration form as well. Using jQuery, the email field is generated dynamically. The labels are positioned below the fields so that they can be placed inside the field. As the field gains focus or ha ...

javascriptjqueryhtmlcss

Aligning the Navigation icons on my webpage

<nav> <ul> <li><a href="index.php">Home</a></li> <li><a href="index.php?about">About</a></li> <li><a href="index.php?products">Products</ ...

htmlcsshtml-listsnav

Utilizing the p tag to incorporate dynamic data in a single line

I am currently working with two JSON files named contacts and workers. Using the workerId present in the contacts JSON, I have implemented a loop to display workers associated with each contact. The current display looks like this: However, I am facing an ...

cssangular

Arranging Bootstrap Cards in an Orderly Stack

I recently created a set of bootstrap cards displayed like this: <div class="card-deck"> <div class="card"> <img class="card-img-top" src=".." alt="Card image cap"> <div class="card-body"> <h5 cl ...

htmlcssbootstrap-4

Accessing Rails controller information via a JavaScript AJAX request

In the process of developing a rails application, I have implemented code within the controller to interact with an API. Initially, I call the inventories endpoint, followed by separate calls to two other id endpoints (store_id and product_id) in order to ...

javascriptjqueryruby-on-railsajaxapi

Remove the unnecessary space at the bottom of the Mat Dialog

I'm currently utilizing Angular Material within my Angular application. One issue I am facing is the excessive whitespace at the bottom of a dialog that displays information about a post. How can I reduce or eliminate this unnecessary space? Take a l ...

htmlcssangularangular-materialdialog

Failed to input data into MySQL database's dynamic field

I have encountered an issue while trying to enter dynamic fields into a MySQL database, and I am struggling to figure out the cause of the problem. Below are both the HTML and PHP files provided; I would greatly appreciate any assistance in identifying and ...

phpjquerymysqlajax