I am facing an issue with aligning the menu and categories divs to the right of the logo div in the following example: jsfiddle. I want them to remain stacked one under another as they are currently, but I am unable to achieve the desired display.
Any assistance or advice on how to resolve this would be greatly appreciated.
To organize the menu and category, wrap them in a div and float that new div.
HTML
<div id="header">
<div class="verticalcenter relative">
<div id="logo">logo</div>
<div class="wrap" align="left">
<div id="menu">menu</div>
<div id="categories">categories</div>
</div>
</div>
</div>
CSS
#header{
background: white;
box-shadow: 0 0 15px rgb(0,0,0);
box-shadow: 0 0 15px rgba(0,0,0,0.3);
position: absolute;
z-index: 50;
width: 100%;
}
.verticalcenter{
width: 100%;
margin: 0 auto;
}
#logo{
width: 25%;
height: 150px;
box-shadow: 0 0 15px rgb(0,0,0);
box-shadow: 0 0 15px rgba(0,0,0,0.3);
display: inline-block;
zoom: 1;
vertical-align: top;
min-width: 220px;
}
#menu{
width: 75%;
display: inline-block;
zoom: 1;
vertical-align: top;
}
.wrap {
float:right;
width:75%;
}
NOTE: A width has been added to the wrapper div so it aligns next to your logo instead of on the far right side. Feel free to remove the width if you prefer it to behave differently.
Check out this sample code snippet:
<div id="header">
<div class="verticalcentered relative">
<div id="logo">logo</div>
<section>
<div id="menu" class="right-div">menu</div>
<div id="categories" class="right-div">categories</div>
</section>
</div>
</div>
And here's the associated CSS:
#header{
background: white;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
z-index: 50;
width: 100%;
float: left;
}
.verticalcentered{
width: 100%;
margin: 0 auto;
}
#logo{
width: 25%;
height: 150px;
box-shadow: 0 0 15px rgb(0,0,0);
box-shadow: 0 0 15px rgba(0,0,0,0.3);
display: inline-block;
zoom: 1;
vertical-align: top;
min-width: 220px;
float: left;
}
section{
float: left;
width: 75%;
}
#menu{
margin-bottom: 10px;
}
.right-div{
box-shadow: 0 0 15px rgba(0,0,0,0.3);
height: 70px;
}
Is there a way to create a responsive div similar to the img-responsive class in Bootstrap, but for a div element that changes its height relative to its width when the window size is adjusted? For example, if you look at the slider on this website "", yo ...
Attempting to modify and override certain classes within the complex control (dxList) of DevExtreme has been successful thus far. .dx-loadpanel-content { transform: translate(0px, 0px) !important; margin: auto !important; left: 0px !important; ...
I am struggling with setting up a dropdown submenu on my website that uses a responsive Joomla template. The submenu always appears behind the main menu and slider, despite trying z-index and relative positioning. Can anyone help me figure out what I' ...
Hi there, I'm trying to create a background image that resizes with the window while maintaining its proportions. I want to achieve this using CSS only. I've been searching for a solution but haven't found anything that works for me. I even ...
I am faced with a challenge where I have Menu items from Menu1 to Menu10, but the limited space on the web page prevents me from displaying all the menu items at once. Currently, I can only show 4 menu items - Menu4 to Menu7. To access the remaining menu i ...
Trying to build a Nuxt SSR app, but encountering an error related to the css-loader during the build command execution. The issue seems to be with Invalid options object. ERROR in ./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue (./no ...
.nav-info { height: auto; background-color: darkblue; color: white; padding: 1em; padding-left: 5%; flex-direction: row; justify-content: space-between; } .flexbox { display: flex; } .info a { color: white; text-decoration: none; fo ...
Is there a way to target the first and fourth div elements using the :nth-child selector for styling purposes? .main{ width:460px; height:240px; } .box{ width:100px; height:100px; background:red; float:left; margin:10px; } /*I tried */ . ...
Currently, I am facing an issue on a website where I cannot make any changes to the CSS stylesheet. Whenever I attempt to modify a style, it appears to work temporarily but then reverts back to its original state once I release the mouse. It seems like the ...
I recently installed a Wordpress Template and customized the table's background and text colors. However, I am struggling to remove the border around the table. Despite searching for solutions, my limited CSS knowledge has not led me to a fix that wor ...
When examining this jsFiddle demonstration at the following link: http://jsfiddle.net/jrXwf/1/ The UL tag showcases a star rating, with accompanying text displayed on the line below it. Is there a method to have everything appear on a single line? Appre ...
Encountering a puzzling situation here. Our angular controller is successfully delivering data to the page, but we are facing an issue with rendering a table due to an unknown number of columns: <table border="1" ng-repeat="table in xc.tables"> ...
I am contemplating the advantages and disadvantages of adding elements to a page and setting display:none versus creating a function that dynamically generates the elements and appends them where needed. In my current situation, I am implementing a reply ...
I need assistance with resizing a lottie animation component on my website's landing page to set its display to none on mobile devices. How can I achieve this? See the lottie component code below: import React from "react"; import Lottie fr ...
Here is some code that I have created to display two links in circles positioned on the left and right sides of a webpage. [class*="navigation"] .nav-previous, [class*="navigation"] .nav-next { position: fixed; z-index: 999; top: 50%; text-align ...
My Rails application (link) is experiencing display bugs in Internet Explorer. I am trying to fix these bugs by making changes in the app/views/layouts/application.html.haml file where I have included: /[if IE] ...
Recently, I decided to delve into web design again and embark on a challenging project for my father's baseball business. The main task at hand is creating a detailed calendar using HTML tables. After spending a considerable amount of time perfecting ...
Is there a React library or a simple CSS trick to create an image's canvas cropping effect on hover? For example, similar to this: Thanks in advance! ...
I inserted a YouTube iframe code inside a div element. <div id="box"> <iframe width="300" height="315" src="//www.youtube.com/embed/82fn4mcNGJY" frameborder="0" allowfullscreen></iframe> </div> After applying CSS to sc ...
While viewing my menu on an iPhone SE in responsive mode, I noticed that all of my burger menu items are hidden except for the one that fits perfectly in the space between my header and main content. https://i.sstatic.net/7K9FD.png I am using Mantine wit ...