I'm currently working on a floating menu that includes several links. I've successfully applied a CSS style to rotate the menu vertically (-90deg), but I'm facing an issue with the height being greater than desired. How can I reduce the height? Additionally, I'd like to eliminate the spaces between each link as well.
-webkit-transform: rotate(-90deg);
margin-top:0px;
font-size: 14px;
width:96px;
padding: 0 0 0 0;
height: 98%;
To accomplish this task, utilizing media queries would be the best approach. Below is a simple example to guide you through the process. Just specify the resolution at which you want the changes to take effect and define the classes and styles to be impacted.
Check out this helpful resource on media queries to kickstart your understanding:
http://css-tricks.com/css-media-queries/
If you're keen on further exploring responsive design, this recommended book provides comprehensive insights and answers all your inquiries:
CSS
@media all and (max-width : 800px) {
#menu > a{
width: 50px;
font-size:100%;
}
}
It is necessary to specify a specific width and height for the <a> element, wrap the text inside another container that can be rotated and translated downward.
To eliminate any space between inline-block elements, you can set font-size:0; in the #menu CSS rule. By setting font-size: <a>, the white-space within the HTML code will effectively disappear.
#menu > a {
overflow:visible;
margin-top:0px;
font-size: 14px;
width:40px;
padding: 0 0 0 0;
text-decoration: none;
text-align: center;
vertical-align: middle;
display: inline-block;
font-family: Tahoma, Geneva, sans-serif;
}
#menu>a>span, #menu>a {
height:60px;
line-height:60px;
min-width:60px;
}
#menu>a>span {
float:left;
padding:0 5px;
margin-right:-5em;/* remove this if you do not want see span overflow; */
box-shadow:inset 0 0 0 1px black;
transform: rotate(-90deg) translatex(-60px);
transform-origin: top left;
background: rgba(153, 153, 153, .8);
color: rgba(255, 255, 255, 1);
}
The links should be structured like this
<a href="#"><span>Item</span></a>When you rotate your items, the "height" becomes the width declaration.
The way heights/widths are structured using percentages makes it difficult to achieve your desired outcome of a child element being a certain percentage of its parent's height (such as having a's width be 100% of #menu's height).
If you're open to options, here are a few suggestions:
#menu {overflow:hidden;} to hide extra content. It's more of a temporary fix than a permanent solution.box-sizing: border-box can help with spacing.rem units instead of percentages for a different responsive approach.The key is to ensure that the widths of your children match the height of your menu. Finding the right method is essential, but relying solely on fluid percentages may not yield optimal results.
Using negative margins and setting fixed heights was the key to resolving the issue!
#menu
{height:100px;}
#menu > a {
-webkit-transform: rotate(-90deg);
font-size: 100%;
padding: 0 0 0 0;
height: 40px;
position:relative;
margin-left:-30px;
margin-right:-30px;
bottom:-30px;}
Experimenting with chat using Node.js and socket.io Currently, I am running Ubuntu 12.04 as a user and have a folder "pp" on my desktop. In this folder, I have placed a server file named server.js. Below is the client code: $(document).ready(function() ...
Is there a way to modify the styles of a shadow element? Specifically, is it possible to extend or overwrite certain properties within a CSS class? I am currently using a Chrome extension called Beanote, which has not been updated since April 2017. There i ...
I'm having trouble loading a CSS file when trying to import it into another CSS file. I've tried various ways of defining the path but nothing seems to work. Any insights on what might be causing this issue? https://i.sstatic.net/IwaY1.png ...
I'm encountering a minor issue with displaying a ul element as I am just starting to learn CSS. My goal is to set the width of my ul to match the widest listitem it contains. Below is the HTML code I have used: <div id="sidebar"> <ul i ...
Within my controller and view files, I have content that is sourced from various places, including API calls. For instance, I have information retrieved from the database where users can update certain details like their last name. After submitting the up ...
In my React application, I am utilizing CSS modules. By configuring modules:true in my webpack.config.js, I can successfully apply styles from files within my src folder. However, when importing components from node-modules, the corresponding CSS is not be ...
I've successfully implemented a packery image grid that is responsive and functional when the background image in the .item-content section is defined in the CSS file: http://codepen.io/anon/pen/eJdapq .item-content { width: 100%; height: 100%; ...
Is there a method to prevent my links from becoming underlined or changing color when hovered over? ...
Here is some example code: <!DOCTYPE html> <html> <body> <h4>Creating a table with nested tables:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td> </td> < ...
I am currently incorporating leaflet into my project and I have encountered the distanceTo method which calculates the distance between two coordinates. My goal is to create a separate JS file with a function named getDistance() where I can house the logic ...
How can I change the background color to #97EFFC when a menu item is selected? I want the body content background to be transparent until a menu item is displayed. Site.css /* Responsive: Portrait tablets and up */ @media screen and (min-width: 768px) { ...
I'm currently working on creating a dynamic navbar that updates the content based on which navigation pill is selected. For some reason, the content in my div.tab-content isn't changing as expected... Here is an example of the code I am using: ...
I need to set up a unique album gallery display where different folders are selected based on the item chosen in a selectbox. Below is the HTML code: <select name="album" id="album" onChange="changeimage();"> <option value="0" selected disab ...
I'm facing a challenge using Flexbox to achieve the desired result shown below https://i.sstatic.net/8vJGQ.png When trying to position my 2 blocks on the right, one of them ends up crossing the line and I struggle to bring it back up. I want this l ...
I am working with divs <div id='top' > <div id='top-border' > </div> <div id='top-menu' > <jdoc:include type="modules" name="top-menu" style="well" /></div> </div> and adjust ...
I currently have an array of .svg icons, each with unique properties that I need to customize: <svg width="24" height="24" viewBox="0 0 24 24"> ... </svg> import styled from 'styled-components'; import Github from 'assets/git ...
How can I resolve the issue of the hamburger menu icon collapsing with the nav-items when clicked? Navbar <header> <div class="container-fluid"> <div class="row"> <div class="col-12 col-sm-12"> ...
Is there a way to display an icon checkmark over the main image when a user hovers over it? The icon should appear in the top right corner of the image. <div> <img class="result-image" src="{{$property->photo}}"> <! ...
I have a PHP file where I am using JQuery to load the content of another file called 'live.php' which should display the current time, but for some reason it is not loading live. Can anyone help me troubleshoot this issue? It used to work perfect ...
In my CSS code, I have specified the styling for the selected mat-step as follows: ::ng-deep .mat-step-header .mat-step-icon-selected { background-color: #a94442; } While this code works well, I encountered a need to update only certain blue icons: ...