I'm facing challenges with designing a menu that includes 4 items, needs to be centered next to each other with spacing in between, and should stack vertically on mobile devices. The desired look for the menu can be viewed in this image...
https://i.sstatic.net/HAFKo.jpg
Could someone demonstrate how to accomplish this?
Creating a stylish menu with an unordered list and CSS can be easily accomplished:
<!DOCTYPE HTML>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.menu {
list-style-type: none;
width: 100%;
text-align: center;
}
.menu li {
text-align: center;
display: inline-block;
padding: 8px 16px;
margin: 8px 8px;
background-color: rgba(0, 0, 255, 0.336)
}
@media only screen and (max-width: 600px) {
.menu li {
display: block;
}
}
</style>
</head>
<body>
<ul class="menu">
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</body>
</html>Here is a code snippet to create a container with menu buttons. Feel free to customize the styles:
<div class="navContainer">
<input type="button" value="Menu1"/>
<input type="button" value="Menu2"/>
<input type="button" value="Menu3"/>
<input type="button" value="Menu4"/>
</div>
This code also includes CSS to align the container and set margins. There's a media query to stack the buttons vertically below 500px:
<style>
.navContainer {
display: flex;
justify-content: center;
}
.navContainer input {
margin-left: 30px;
}
@media only screen and (max-width:500px){
.navContainer {
flex-direction: column;
}
}
</style>
<div class="single-pro-details"> <!--Customize in the CSS--> <h6>Home / Beats</h6> <h4>Unique Lil Tecca Type Beat - New Love</h4> <h2 id="price">$ ...
I'm currently diving into the world of Javascript and jQuery, attempting to create a functionality where upon clicking the submit button, the website dynamically expands to display search information. Although the feature is still in progress, I am ut ...
Can anyone assist me with this problem? I am currently utilizing bootstrap cards to create a section on my website. However, I am encountering an issue with the circular images of the cards. I want to prevent my images from getting stretched when placed i ...
I am in search of a way to provide my users with various "feature" choices that will assist them in creating an HTML file for an email. I already have the code ready for each feature, but I want users to be able to select a feature (such as Hero Image Head ...
After spending hours trying to make the code work with the example provided, I find myself unable to get it functioning correctly. Is there anyone who can assist me in putting all of this together so that it runs smoothly? var result,userchoice; functio ...
I'm facing an issue and need some help. I have a form with one select field and one text field. What I want is for the text field to display a value corresponding to the option selected in the select field. For example, if I choose "B" from the select ...
Hey there, I'm a newcomer to Javascript. I've been practicing my Javascript skills and trying to replicate something similar to what was achieved in this example: Change Button color onClick My goal is to have this functionality work for multip ...
<template> <div class="footerpart-container"> <div class="general-container"> dadada </div> <div class="legal-container"> dadad </div> <div class="helpsupport-container"> dada ...
el.scrollIntoViewIfNeeded() function is used to scroll to element el if it's not within the visible browser area. Although it generally works well, I have encountered some issues when trying to use it with a fixed header. I have provided an example s ...
I am puzzled by the presence of approximately 10px of whitespace at the top of my HTML file. Despite setting margin and padding to 0 in the "body" section of my CSS, the whitespace persists. Any suggestions? Thank you! Update: I discovered that removing t ...
Is there a way to add lazy loading to a semi custom owl carousel that uses background images instead of regular img tags? I've tried using Owl carousel's function for lazy loading but it doesn't seem to work. How can I achieve this? This is ...
Having trouble with css in VueJs. I can't seem to figure out what I'm doing wrong. Generally, my scoped style css works fine in vuejs, I can target ids and classes without any issues. The problem arises when trying to change the internal css va ...
$("#bottomWatch").click(function(){ var doops = $(".videoMove").display; if (doops == "none") { $("#video").css("left","15%", "display: block"); } else { $(".videoMove").cs ...
I am looking to implement a rotating three-card display on click, and have come up with the following code: $('.box1').click(function(){ $('.box1').toggleClass('removeanimate'); $(this).toggleClass('go'); ...
When I have a JQuery dialog open and make some $.ajax calls, why can't I change the cursor? I want to display a progress cursor while the code is processing so that users can see that the action is still ongoing. However, even though I update the CSS ...
[Pardon my English] I recently managed to center my "logo" both horizontally and vertically. However, I am looking to have my logo shrink a bit when resizing the browser. Any suggestions on how to achieve this using bootstrap? Index.html <section> ...
I am working on updating a legacy web application that is specifically targeted for IE 6. Currently, I am re-skinning the interface and replacing the default browser button look with a blue button image. While my HTML and CSS code works perfectly in IE 8, ...
I need help with my homepage banner image as I am trying to make it responsive by adding media queries. The goal is for the image to adapt to 3 different sizes based on the screen being used, but currently only the medium-sized version appears. Could someo ...
I'm encountering an issue with my Bootstrap 4 card carousel. When the next or prev buttons are clicked, there is a strange transition effect. Additionally, in the mobile version, the buttons do not work properly. It seems that when the card slides to ...
Currently, I am working on a timesheet table using Materialize CSS with form elements in cells. However, I find the height of the table rows to be too large for my liking. Is there any way to make the table more compact? If this is a limitation of Materi ...