WHMCS content covering Bootstrap 3 Nav Menu

I am currently in the process of redesigning a website that utilizes WHMCS for certain content. While the main site operates on Bootstrap 4, I have had to adapt and recode elements using Bootstrap 3 to align with WHMCS's templates.

Everything seems to be functioning correctly except for the navigation bar. In mobile view, when the nav is expanded, instead of pushing the page content down as expected, it overlaps the existing content. I am unsure if this issue stems from something I am overlooking or if there is an inherent compatibility problem between WHMCS/Smarty and the Bootstrap code.

You can view the site here:

This snippet showcases my header.tpl:

-- HTML and script snippets --

Here's a quick snapshot of my CSS:

-- CSS styles specific to combining Bootstrap 3 with WHMCS --
htmlcsstwitter-bootstrap-3smartywhmcs

Answer №1

Simply include CSS to achieve the desired effect.

    #collapseNav{
        background: #f9f3f3;
        z-index: 999;
        position: relative;
    }
    body .navbar-collapse.collapse{display:none !important}
   .navbar-nav {display:none}
   .navbar-nav .show{display:block;}

    jQuery('.navbar-toggle').on('click', function(e) {
        jQuery('.navbar-nav').toggleClass("show");
    });

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 navigate to the top of a form panel?

I'm currently developing a Sencha Touch mobile app. I have a form panel with multiple fields, so I made it scrollable. However, every time I open the screen (panel), scroll down, navigate to other screens, and then return to the form panel, it stays s ...

javascriptjqueryhtmlcsssencha-touch

Tips for centering text in a div element

Check out this fiddle http://jsfiddle.net/QLCeH/ where the text isn't aligning properly with the header "Google" and is ending up below the image. Here's the code from the fiddle: HTML : <div style="margin-left:auto;margin-right:auto; widt ...

htmlcss

Convert the background image (specified in the CSS with background-image) into a PHP variable

I am looking to create a product gallery featuring 5 products, each with its own background image attribute. I am using a loop to insert the product images and I want each loop to display a different background-image. One approach I have considered is usi ...

phpcsshtml

How to remove an image input type using jQuery

Can anyone provide insight into the issue with these scripts? I am attempting to remove an input when it is clicked. The input is of type image, so CSS cannot be used. I have tried using JavaScript but it doesn't seem to be working. HTML <!doctyp ...

javascriptjqueryhtmlcss

Is the Ajax call being triggered unexpectedly?

I've been working on an Ecommerce website and everything was going smoothly until the update_cart (quantity) code started submitting my form instead of updating it. I've tried making changes and even moving it outside the form, but the issue rema ...

phpjqueryhtmlajaxforms

Innovative Audio Editing Tool using Javascript

Currently, I am in the process of creating a JavaScript-based audio editor that will allow users to record, play, and edit audio files. It is crucial for the tool to be able to visualize both real-time recorded audio and selected/uploaded audio files. Whil ...

javascriptjqueryhtmlaudio

Struggling to find my way around my website's pages since implementing jquery scroll features

Currently, I am developing a website for a small business. I have set up a feature on one of the pages that enables users to click on a title in the table of contents and have the page automatically scroll down to that specific section. Below is the HTML ...

javascriptjqueryhtml

Limit the scripts on the page to only those from utilized plugins

Can we optimize the HTML output by including only the necessary scripts and files used on the site/page? The page speed is significantly affected by loading all JS and CSS files for installed plugins and the admin interface, as seen in the example below: ...

javascripthtmlcssimpresspages

Looking for assistance with accessing elements using the "document.getElementById" method in Javascript

Below is the code snippet I am working with: <html> <head> <script> function adjustSelection(option) { var selectList = document.getElementById("catProdAttributeItem"); if (option == 0) { ...

javascripthtml

"Utilizing jQuery to Trigger CSS3 Transform Animation Replays After a Set Number of Iterations

I currently have an animated image set up like this: <div class="image_for_sping"> <img src="/anyimage.png"> </div> The image has a style attribute added by jQuery which contains the following animation properties: animation: spin3 ...

javascriptjquerycsscss-animations

Angular - ui-router states are not being detected

I'm currently working on a Spring and Angular JS web application project. The structure of the project is as follows:https://i.sstatic.net/xgB4o.png app.state.js (function() { 'use strict'; angular .module('ftnApp') .con ...

javascripthtmlangularjsangular-ui-router

Adjust width when hovering or moving the mouse in and out

Apologies for the lack of a creative title... I'm sharing the following code snippet: .wrapper { display: flex; border: 1px solid red; padding: 10px; } .groups { display: flex; border: 2px solid blue; width: 70%; } .leftColumn { widt ...

jqueryhtmlcssangularjs

How can I ensure that images remain within the link elements in a flex container?

I'm currently assisting a colleague with his website. His main request is to have the two images positioned below the larger image at the beginning of the page align perfectly with the edge of the page, so that the right image lines up with the one ab ...

htmlcssflexbox

Is there a way to position this Flex-Box Item beside the image?

Please refer to the image How do I rearrange this Flex-Box Item to be positioned next to the image? https://i.sstatic.net/eSy3w.png <div class="brif fb"> <div class="sml-con"><img class="sml-thumb" src="images/chosen/edwa ...

csspositionflexbox

Using @font-face to apply a font on an SVG file is not supported

I attempted to incorporate custom fonts into my SVG file, but unfortunately, my efforts were unsuccessful. While I have successfully implemented custom fonts on regular HTML/CSS webpages before, I encountered difficulties when trying to do the same with SV ...

htmlcsssvgfontsembed

solving the issue of CSS not loading properly on the live server

My current website is hosted on a server with the URL as follows: test1.test.com However, I need to move it to another hosting service that does not support this configuration. I had to change the URL to: test.com/test1 Everything seems to be working f ...

csssymfonydeploymentroutes

Styling WordPress twenty seventeen custom header with CSS tags

I have encountered a problem on my website where the custom header is causing issues on all pages except the home page. Specifically, in the custom header div element there is a style tag adding a margin-bottom of 82px. Despite searching through template p ...

phphtmlcsswordpresswordpress-theming

Transforming the appearance of the menu element in Vue using transitions

In my Vue app, I have this SCSS code that I'm using to create a smooth transition effect from the left for a menu when the isVisible property is set to true. However, I am encountering an issue where the transition defined does not apply and the menu ...

javascripthtmlcssvue.js

Struggling to pass a function to a stateless functional component in React

I'm currently working on a drum machine project in React as part of my freeCodeCamp tasks. I have successfully rendered the buttons, but I am facing difficulty in making them play the audio files. I've built a stateless functional component that ...

javascripthtmlreactjs

The CSS rule for the Checkbox Input column is consistently implemented on the element located in the top row

Does anyone have experience working with a table containing checkboxes like the one demonstrated here? I am encountering an issue where toggling the checked property of any input on any row always affects the element in the first row. Upon further investi ...

htmlcsscss-selectorshtml-table