Steps to insert an h2 element within a MeanMenu container

My current project involves working on a website that utilizes the meanmenu plugin. I have been facing a challenge for the past two days in trying to display a title inside the mean menu container.

Here is the HTML code snippet for the menu:

            <div class="row">
                <div class="col-lg-4 col-md-8 col-sm-4">
                    <h2>Title Text</h2>
                </div>
                <div class="col-lg-8 col-md-12 col-sm-12 hidden-xs">
                    <div class="main-menu float-right">
                        <nav>
                            <ul>
                                <li class="active"><a href="#banner">Home</a></li>
                                <li><a href="#about">About Us</a></li>
                                <li><a href="#features">What We Do</a></li>
                                <li><a href="#screenshots">Our Work</a></li>
                                <li><a href="#support">Contact Us</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <div class="hidden-sm hidden-lg hidden-md col-sm-2">
                    <div class="mobile-menu">
                        <nav>
                            <ul>
                                <li class="active"><a href="#banner">Home</a></li>
                                <li><a href="#about">About Us</a></li>
                                <li class="hidden-xs"><a href="#features">What We Do</a></li>
                                <li><a href="#screenshots">Our Work</a></li>
                                <li><a href="#support">Contact Us</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

Expanded view: https://i.sstatic.net/Ng4Ia.png I am struggling with keeping it inline in the collapsed state: https://i.sstatic.net/3LTye.png

I have searched for solutions online without success. Is there anyone who has encountered and resolved this issue before?

Answer №1

The reason for this issue is likely due to improper usage of bootstrap classes.

Try the following code snippet (assuming you have shared the .css file with us):

        <div class="row">
            <div class="col-xs-6 col-sm-4 col-md-8 col-lg-4">
                <h2>Title Text</h2>
            </div>

            <div class="visible-xs col-xs-6">
                <div class="mobile-menu">

                </div>
            </div>
        </div>

Answer №2

It's possible that your Title Text is taking up 12 columns because you didn't set col-xs-* grids for it. Try adjusting the grid settings and if you can, share a jsfiddle of the code for further assistance :)

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

Ways to create space between rows

Here is some code structure that I'm working with: .col_1_6 { width: 70%; float: left; } .col_1_4 { width: 30%; float: left; } .row-content { clear:both; padding-bottom: 105px; } <div class="row-content"> <div ...

Adjust text to fit within a specified height container automatically

Is there a way to make text resize automatically based on the height and width of its container? I've looked at similar questions but none seem to provide the right solution for me. I tried using fitText, but it doesn't take the container's ...

Transforming HTML content in real-time using Express.js

I'm a little uncertain if I understand the concept of Express MVC correctly: If my goal is to create a single page application and dynamically modify the HTML, can Express assist me with this? Or will I only be able to work with static pages that req ...

What is the process for connecting two scripts together?

Purpose : I am currently working on a Firefox add-on with the goal of tracking the online status of my team members in a game. Current Progress : I have developed an initial JavaScript script that runs upon opening the browser. This script creates and ...

Utilizing JavaScript to enable HTML checkbox to be checked automatically

I am currently working on a constructor that generates checkboxes within a loop. My issue lies in attempting to set these checkboxes as checked, however, it doesn't seem to be functioning correctly. Below is the code snippet: funct ...

What could be causing the issue when a form returned by a jQuery AJAX request to PHP is not functioning properly within a DIV element?

My goal is to create an interactive web page and explore newer web technologies that have emerged in the past decade. This includes PhP, jQuery, and AJAX. I have simplified the code to focus on a specific issue. The objective is to have jQuery call a PhP ...

Is there a method to identify the Javascript responsible for altering a CSS property of an element?

I have a div that is toggled between hidden and visible states by clicking on another element. I can observe the changing visibility CSS property of the div using Firebug. The div is initialized using the Microsoft JavaScript library in code like this: Sys ...

Update the table contents smoothly using the html helper PagedListPager without having to reload the entire

I am struggling with a specific line of code that utilizes the html helper's PagedListPager: @Html.PagedListPager(Model.kyc_paged_list, page => Url.Action("ClientDetails", new { id = ViewBag.ID, kyc_page = page, transaction_page = Model. ...

Caution: Additional server attributes detected: style

Alert in my Next.js project, I encountered the following message: Notice: Server is sending additional attributes: style I am uncertain about the source of this warning and therefore unable to provide any code snippet. ...

What is the best way to position the logo on the left side and the navigation on the right

How can I position my logo to the left of the navigation bar? This is my current HTML code: <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="icon" type="image/png" href="SENCOR_Logo.ico"> & ...

Utilize flexbox to align two buttons side by side and manage their positioning

I have a collection of buttons that I want to display in rows of two. I am looking for a way to set the specific width of each button and decide whether they should be aligned left, center, or right. Ideally, the outcome would resemble the following: http ...

The adaptable height of the main content container

I've built a website using Bootstrap, but I'm facing issues with setting the main content area. Even though I've specified height in percentages and set a min-height, the location of the div shifts when I navigate between pages using jQuery ...

Active Bootstrap tab-pane when clicked

index.html <div class="ban_km font_bold"> <a class="redrct_tab" href="Maintenance-schedule">find out more</a> </div> maintenance schedule.html <ul id="leadbann" class="nav nav-tabs" role="tablist"> <li role="presentat ...

Issue with dynamic dropdown selection causing element to not display

My code is designed to call the addpoc() method on button click, which generates a set of input boxes and a dropdown. When the dropdown option personal/workmail is selected, an input box should appear based on the selection. The issue arises after the init ...

Can IE(7?) cause distortion of backgrounds from sprites?

This task is giving me a headache. We're almost finished with revamping our website. The last step involves consolidating all the glyphs and icons into a sprite. These images are transparent .png files, so we made sure the sprite maintains transparen ...

Challenges in achieving seamless interaction between Javascript Form and Ajax for logging in to a Secure Magento Store

My Webdeveloper abandoned me and my form doesn't seem to work always. When clicked it doesn't appear to do anything (just shows the "javascript:;" href on the browser status bar), but sometimes it works... I've searched everywhere for a so ...

What could be causing my divs to not properly handle overflow with the overflow-y scroll property?

I'm struggling with making my sidebar and content area responsive in terms of height. I want them to adjust to fill the screen appropriately, rather than having a fixed height. The issue arises when I have varying content heights, such as when a page ...

make sure to reload the page when utilizing the ajax function

My goal is to submit a form using jQuery AJAX. Below is the code I am using, but when I trigger the ajax function, it reloads the page and redirects me to the 'registerphp.php' page. The echo messages from the 'registerphp.php' page are ...

Tips for showing legend symbols within tooltips on Highcharts

I've encountered an issue with Highcharts that I need help with. In my Highcharts chart, I'm trying to transfer the symbol from the legend to the tooltip. I'm tackling this challenge in two scenarios: Lines: I have two series, one with a ...

Unable to find any matches when conducting a search through Google Apps Script

After spending days analyzing the code, I am encountering an error that states "uncaught reference error: google is not defined." This issue seems to occur specifically in line 360. Curiously, when inspecting the original code editor, line 360 simply conta ...