Is there a way for me to sign up for Bootstrapper whenever the Navbar is changed?

I'm in the process of creating a small homepage. I need to make sure that depending on the style of the Navbar (whether it includes a hamburger menu or not), the span with id=actualPage is displayed correctly. Can anyone help me achieve this using JQuery, JavaScript, or CSS? I've researched collapsing elements but haven't found a simple solution yet.

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand active" href="index.php?p=home">MyPage
                <span id="actualPage">- <?= $pages[$activePage] ?></span></a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                ...
            </ul>
        </div>
    </div>
</nav>

Any suggestions or advice would be greatly appreciated!

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

From what I recall, Bootstraps Nav switches to a hamburger icon at 1200px.

If you only want the span to be visible when it's not collapsed, you can achieve this with CSS like so:

.mySpan{ display: inline-block;}
@media (min-width: 1200px) { .mySpan{display: none;}}

If you require that the ID doesn't exist for certain computations and based on screen size being less than 1200px, you would need to utilize JavaScript to add or remove the ID dynamically.

EDIT: For a JavaScript solution, you could try something similar to this:

window.onresize = function() {
    if (window.innerwidth < 1200){
        document.getElementById("small").id = "big";
    }
    else{
        document.getElementByID("big").id = "small";
    }
};

Answer №2

I managed to tackle the given issue by utilizing the hidden classes. Although it doesn't provide a direct solution, it addresses the root problem effectively.

If you are working with Bootstrap 3:

<a class="navbar-brand active">Test<span id="actualPage" class="hidden-xl hidden-lg hidden-md hidden-sm">- <?= $pages[$activePage] ?></span></a>

For those using Bootstrap 4:

<a class="navbar-brand active">Test<span id="actualPage" class="hidden-sm-up">- <?= $pages[$activePage] ?></span></a>

Feel free to refer to this link for more information: Hidden-md-down is not working

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

What is the best way to choose between single or multiple checkbox options?

When processing each question, I aim to create an if statement that checks if the .ReplyType text input is equal to Single, allowing the user to choose only a single checkbox button option. If it equals Multiple, then the user should be able to select mult ...

phpjavascriptjqueryhtml

Typescript restricts dynamic property access within objects

I'm encountering some difficulties while attempting to access my object property in TypeScript: const sum = (type: string) => { return { status: 'Sum', value: data?[type].sum, }; }; sum('first') Here is a glimps ...

javascripttypescript

Filter and search functionality using React.js within a nested tree component

I am currently practicing beginner-level exercises on React.js and have developed a tree view component using material-ui. My next goal is to incorporate a search bar to enable users to search for specific keywords within the tree view structure. Below is ...

javascriptreactjsmaterial-ui

Steps to transforming a standard array into a multidimensional array

I have a JSON array that is generated after submitting a form using the formSerialize function. Here is an example of how the array looks: [ {"name":"client_management-testmonitoring","value":"0"}, {"name":"client_operations-testmonitoring","v ...

javascripthtmljsonmultidimensional-array

develop a submission form using jquery

I am looking to create a submit action where clicking the submit button does not refresh the page. Instead, the data inputted in div1 will be sent to kanjiconverter.php and displayed in div2 using <?php echo $newkanji ?>. There are three forms on thi ...

javascriptjqueryhtmlajax

What is the best way to send a string literal as a parameter to a method triggered by a click event

I'm trying to pass a string literal to a method as a click handler. <button (click)="changeLanguage('en')">EN</button> The above code is not working. Any suggestions on how to achieve this? ...

htmlangulartypescript

Could Safari 7.1 be causing issues with outline-color and overflow?

After upgrading to Safari 7.1, I noticed that a couple of my css lines have stopped working. These lines were functioning fine with Safari 7.0.x and are still working in browsers like Chrome. overflow: hidden; and outline-color: [color]; Specifically, ...

csssafari

"Exploring the power of jQuery's attribute and index

I need to update my menu by adding the "current" class to the <li> with the id="home". I attempted the following approach: $('#main-nav ul li').attr('id').eq('home').addClass('current'); I also experimented w ...

jquery

Choose a specific field from a Django filter option

Just had a quick query: Is there a way for me to choose only one field from my filter form in Django? At the moment, I'm showcasing the entire form: <div class="container"> <form method="GET" > {{ filter.form.Precio|crispy }} ...

pythonhtmldjangopython-3.x

Issues with displaying calendar items on the React timeline are only resolved after pressing F12 or resizing the

I am encountering a problem while trying to plot the items array in the timeline calendar. Interestingly, the groups array is working fine. The items array also functions properly when values are provided manually. However, the items only render after pre ...

javascriptreactjsschedulertimelinereact-calendar

Browsing HTML Documents with the Click of a Button

After collecting JSON data from a SharePoint list, I am currently in the process of creating an HTML Document. At this point, I have completed approximately 80% of the expected outcome. Due to Cross-Origin Resource Sharing (CORS) restrictions, I have hard ...

javascripthtmljquerycssjson

Utilize a generic handler to seamlessly upload files asynchronously

I have implemented the following code to asynchronously upload a file to the server: HTML: <form id="file_upload" action="UploadFile.ashx" target="upload-target" method="post" enctype="multipart/form-data" onsubmit="javascript:return uploadClicked();" ...

javascriptasp.netajaxashxgeneric-handler

When I tried to open a website using the "target=_blank" attribute on the Chrome mobile version for iPhone, I noticed some strange viewport behavior

[Update] I encountered the following issue: I once had a website. It functioned well, except when opened in a new tab with target "_blank." When accessing the site directly, everything appeared normal enter image description here However, when accessed ...

htmlcssstylesgoogle-chrome-app

Is there a way to utilize a parameter for the user's input instead of relying on document.getElementById when incorporating a button?

let totalScore = 0; var myArray = [1, 2, 3, 4, 5]; let randomNum; function NumGuess(userInput) { var userGuess = userInput; var i; for (i = 0; i < 1; i++) { var randomNum = myArray[Math.floor(Math.random() * myArray.length)]; } if (us ...

javascriptparameters

Tips for incorporating a return statement within a network request function that is already returning information pertaining to the request

Is there a way to retrieve the data extracted from within newReq.on('response', (response) => {? var request = require('request'); const cheerio = require('cheerio'); const { app, net, BrowserWindow } = require('elect ...

javascriptnode.jselectron

Transferring data from JavaScript to ASP.NET (via AJAX)

I'm trying to figure out how to pass variables from JavaScript to a textbox. I have a variable in JavaScript but I am unsure how to transfer it to the textbox. I have heard that using AJAX makes it easy, but I don't know how to implement it. I th ...

c#javascriptasp.netajaxfunction

Is there a way for me to expand the dropdown menu?

My current dropdown looks like this. I'd like the dropdown menu to span across the screen, something like this: To create my dropdown, I am using https://github.com/angular-ui/ui-select2. AngularJS JQuery Select2 I'm not sure if there is an ...

jquerycssangularjsdrop-down-menu

Exploring ways to create a dynamic background image that allows the rest of the page to float over seamlessly

Currently working on a responsive website and almost done with the build. However, I came across a site where an image appears to be floating behind the rest of the webpage content. Tried searching for a solution using w3.css without any luck. Any sugge ...

htmlcssresponsive-design

What is the process for marking a form field as invalid?

Is it possible to validate the length of a field after removing its mask using text-mask from here? The problem is that the property "minLength" doesn't work with the mask. How can I mark this form field as invalid if it fails my custom validation met ...

htmlcssangulartypescriptangular5

What is the use of the typeof operator for arrays of objects in TypeScript?

How can I update the any with the shape of the options's object below? interface selectComponentProps { options: { label: string; value: string; }[]; } const SelectComponent: React.FC<selectComponentProps> = ({ options, }) => ...

javascriptreactjstypescript