My header includes a navigation bar, logo, and a brief description.
I'm struggling to make it responsive. The navbar is fine with the hamburger icon, but my solution doesn't match the visual graphic I want for smaller viewports. How can I achieve this?
Here is a JSFiddle: http://jsfiddle.net/Mwanitete/4f6d7emr/10/
Visual representation of how I want it to appear on small screens:
https://i.sstatic.net/BX0DQ.png
I made adjustments to your block
.marketing-main-header_banner
{
background-image: url("https://svgshare.com/i/8KR.svg");
background-size: auto 1199px;
background-repeat: no-repeat;
background-position: center -250px;
position: relative;
height: 949px;
}
This revised code brings you closer to the desired outcome you were aiming for.
The original issue was using "cover" as the size property, which would always try to fit at least one dimension of the background into the visible area. By adjusting the background size and positioning, we were able to ensure the entire background image is displayed as intended.
I chose an offset of 250px based on what looked best initially, but you may need to fine-tune this value further for optimal results.
You can view the updated code in action here: http://jsfiddle.net/4f6d7emr/20/
Keep in mind that these modifications are tailored for smaller displays where the burger icon is present. For a fully responsive design, consider incorporating this into your media screen CSS rules.
I'm having trouble resetting a timeout timer every time there is a click interaction with the document. The clearTimeout function doesn't seem to be working as expected. Here is the jQuery code snippet: $(document).click(function(e){ $("#vidB ...
Below is the content of a box I have: https://i.sstatic.net/QmG5i.png When the above box is hovered over, it flips to this: https://i.sstatic.net/QsS9t.png This block's HTML code is as follows: <div class='tiles'> <div class= ...
I am a newcomer to utilizing ui-router and I am facing challenges with managing routing and reloading some states. Any assistance would be greatly appreciated. An overview of my index.html <html ng-app="resApp"> <head></head> < ...
My slideshow has a hover function to pause it using .stop(true). Upon mouse exit, it should resume playing from where it left off. However, currently, when I hover over it, the animation stops and then continues until it reaches its target, pausing there a ...
I have recently started learning React JS and JavaScript. To practice, I am working on a small project where I am facing an issue with creating dynamic rows and columns. My aim is to display data in 4 columns initially and then move to a new row and column ...
This is a basic HTML/AJAX/PHP script I have implemented. <form id="new_user" action="" method="post"> <div class="col-md-3 form-group"> <label for="username">Username</label> <input type="text" class="form-control" name ...
Why does the submit input look different on IOS only, and how can this be resolved? https://i.sstatic.net/UVlKB.png Thank you in advance For HTML: <input class="btn" type="submit" [disabled]="" ...
Seeking help once again after encountering difficulties the first time. Any feedback is greatly appreciated. I am currently working on a website that includes 2 divs with background images, but I'm struggling to make them align perfectly across all d ...
Hey everyone, I'm trying to adjust the color of a button on my webpage based on the response I receive from this.responseText. I understand the JSON response, but for some reason, I can't seem to incorporate it into my code. If anyone could lend ...
I am in the process of creating a website that will incorporate search, add, update, and delete functionalities all on a single webpage without any modals. The main focus of this webpage is facility maintenance. Adding facilities works smoothly; however, i ...
Are there any available modules for utilizing node.js as a peer in WebRTC? I am interested in using WebRTC in a client/server manner rather than P2P for its ability to send packets unreliably (i.e. avoiding the delay caused by TCP's guarantee of packe ...
I'm in the process of setting up a basic support center using HTML. Everything was going smoothly until I incorporated a bootstrap alert. Placing the alert inside col-lg-4 as shown in the code snippet from bootsnipp caused an unwanted whitespace to ap ...
Currently, I am facing an issue with a website that I am in the process of redesigning. The problem seems to be specific to Internet Explorer 7 (ie7). If you visit dev.indigoniche.com (you may be redirected back to the main site due to a cookie issue, in w ...
I am currently working with Bootstrap V4 alpha 6 and Angular 5 to develop a table that includes a fixed header while scrolling. Unfortunately, I have been facing challenges in getting this functionality to work effectively. Note: The navbar is set to fixe ...
My angular.js application has a basic setup where the index.html file renders static content like Top/Sidebar. Inside, there is a <div ng-view></div> to display partial html files such as home.html. Upon logging into the application, both the ...
I recently asked for help on creating a basic flex layout using Bootstrap for a website. I received the correct solution, but now I have a new project with a different layout that I need assistance with. Here is the design I am aiming for: Check out the l ...
I have noticed that my top menu and submenu display correctly on a normal screen size. However, when the screen size is reduced, the menus and submenus do not align vertically as expected with Bootstrap. Instead, they appear misaligned. How can I adjust th ...
I am trying to integrate my jQuery function with an HTML tag for my login form that connects to an Azure database. I want a modal pop-up to appear when the client presses the Login button, displaying a specific message based on whether the user is in the d ...
I've created the following code snippet: function acceptButtonClick(th) { var id = $(th).attr('data-id'); $(th).parent().parent().find('div.Declined').attr('class', "Approved"); $(th).parent().parent().find( ...
Currently, I am attempting to modify the color of an image using CSS. This particular image is a key element in the layout of my website. To get a better understanding, you can view a screenshot of the element here: , and see an example post containing the ...