Thank you to everyone who have been helping me with my first project.
I have managed to make this responsive nav bar
1.However when the mobile menu is active the "burger" button is stuck to the left and small.
I have tried to make sub menus but had no success.
3.I have a logo i would like on the same line as the navigation menu but when the media is on a mobile devise (480px) I'm trying to have the logo on the top and center and the naviagtion on the line below.
any help will be great. Thank you in advance.
this is the link to my jsfiddle
https://jsfiddle.net/jkfb4Lus/
<body>
<div id="container">
<header id="header">
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>About</li>
<li>Writings</li>
<li>Extra</li>
<li>Contact Us</li>
<li class="icon"><a id="button" href="javascript:void(0);" onclick="myFunction()">☰</a></li>
</ul>
</header>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</div>
</body>
body{
margin:0;
padding:0;
}
*{
margin:0;
padding:0;
}
#header{
width:100%;
height:65px;
background-color:white;
}
/*remove margins and padding from the LIST, and add a black background color*/
ul.topnav{
width:100%;
height:65px;
float:right;
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:#333;
text-align:right;
}
/*float the LIST (li) items side by side*/
ul.topnav li{
display:inline;
}
/*float the LIST (li) items side by side HOVER*/
ul.topnav li:hover{
border-bottom:;
}
/*style the (a)links inside the LI items*/
ul.topnav li a{
position:relative;
display:inline-block; /* so it accepts top/bottom padding */
text-decoration:none;
padding:px;
color:#FFF;
font-weight:500;
width:75px;
text-align:center;
line-height:65px;
width:100px;
}
/*change backround color of the LINKS (a) on hover*/
ul.topnav li a:hover{
background-color:#F1CBFF;
color:purple;
transition:background-color 1.0s ease;
}
/*hide the list (li) items that contains the link that
should open and close-quotethe topnav on small screens*/
ul.topnav li.icon{
display:none;
}
/*when the screen is less than 680px hide,hide all list (li)items,
except the first one("Home"). Show the list(li) item that contains
the link (a) open and close the topnav (li.icon)*/
#media screen and (max-width:680px){
#header{
height:auto;
}
/*remove margins and padding from the LIST, and add a black background color*/
ul.topnav{
height:auto;
}
ul.topnav li:not(:first-child){
display:none;
}
ul.topnav li.icon{
float:right;
display:inline-block;
}
/*float the LIST (li) items side by side*/
ul.topnav li{
float:left;
}
}
/*the "responsive" class is added to the topnav with Javascript when the uses
clicks on the (icon). This class makes the topnav look good on small screens*/
#media screen and (max-width:680px){
ul.topnav.responsive {
position:relative;
}
ul.topnav.responsive li.icon{
position:absolute;
right:0;
top:0;
}
ul.topnav.responsive li {
float:none;
display:inline;
}
ul.topnav.responsive li a{
width:100%;
display:block;
text-align:center;
padding:10px;
}
ul.topnav li a:hover{
border-bottom:1px purple solid;
transition:all 1.0s ease;
}
}
Have you tried using flexbox?
ul.topnav.responsive li.icon{
display: flex;
align-items: center;
}
Related
i have a problem fitting text into blocks (dropdown menu) in CSS.
The code is in Serbian language, but if needed i can translate it to english.
Ok, so i have "Ponuda usluga", when i mouse over that, i get dropdown menu with "Lov" , "Obuka Pasa", "Ribolov" and "Obezbedjivanje potrebne dokumentacije", but the problem is the last one does not fit and proceedes to go under in next line, like shown on screenshot1 here https://ibb.co/YbTytJw (NOTE: at the screenshot i was hovering over "ribolov", thats why its orange).
I would like it to be like this screnshot2 https://ibb.co/dW65Tyx.
Same problem when i hover over "Lov" (that opens a new dropdown menu with 2 options there) like shown on screenshot3 https://ibb.co/0ZKxVWj (Note: I added >> to point out that there is another dropdown menu, and again, i was hovering over "lov", so thats why its orange). Same as the first problem, i need it to say "lov na sitnu divljac" and underneath "lov na krupnu divljac", instead it says "lov na sitnu", "lov na krupnu" and underneath "divljac". I need it to be like screenshot4 https://ibb.co/8zspMY0.
<style>
*{
padding:0;
margin:0;
box-sizing:border-box;
}
html{
height:100%;
}
.wrapper{
min-height:100%;
width:100%;
position:relative;
}
body{
height:100%;
background:#ddd;
}
h2{
padding:50px;
background-color:#161B21;
color:#f0f1f5;
font-family: big john;
text-align:center;
font-size:30pt;
letter-spacing:15px;
}
.navigationDesktop{
background-color:#161B21;
}
nav{
height:40px;
width:700px;
display:block;
margin:0 auto;
text-align:center;
text-transform: uppercase;
}
nav a{
display:block;
text-decoration:none;
font-family:monospace;
font-weight:bold;
font-family:13pt;
color:white;
}
nav a:hover{
background-color:#F4A950;
color:#f0f1f5;
}
nav ul{
list-style:none;
}
nav ul li{
float:left;
width:140px;
height:40px;
line-height:40px;
background-color:#161B21;
list-style-type: none;
}
nav ul ul li{
position:relative;
display:none;
}
nav ul ul ul{
display:none;
}
nav ul li:hover ul li{
display:block;
animation: navmenu 500ms forwards;
}
#keyframes navmenu{
0%{
opacity:0;
top:5px;
}
100%{
opacity:1;
top:0px;
}
}
nav ul ul li:hover ul{
display:block;
position:absolute;
width:140px;
left:140px;
top:0px;
}
</style>
Here is the pastebin of the HTML https://pastebin.com/MLweR454
And here is the pastebin of the CSS https://pastebin.com/mtszKhNu
That is happening because you are trying to set each nav link block size by using line-height:40px, that creates 40px of space between each line of text. What you want do to is set your nav a to line-height:1.1;, no px, and make the size of the link block be based of the amount of text and padding, by adding padding: 15px 0;
I am trying to make a responsive menu bar and when the width is under 550px for example, the menu items overlay with the divs that are following next. What am I doing wrong?
In the CSS I tried to make the list position relative, but the same result.
HTML Code:
<div id="navbar">
<h2>Aripile Zarandului</h2>
<ul id="ulNav">
<li class="current">Acasă</li>
<li>Despre noi</li>
<li>Fotografii</li>
<li>Login</li>
<li>Contactează-ne</li>
</ul>
</div>
CSS Code:
#ulNav li{
list-style-type:none;
display:inline;
padding-left:10px;
padding-right:10px;
line-height:3em;
display:inline-block;
}
#ulNav li:hover{
background-color:#2980b9;
}
#ulNav li a{
text-decoration:none;
color:white;
font-size:1em;
display:block;
}
/* Responsiveness */
#media screen and (max-width: 650px) {
#ulNav li {
display:block;
text-align:center;
position:relative;
}
#ulNav{
float:none;
}
}
Screenshot
I'm doing a good job in styling the mobile menu for the client website but have some coding issue that trying to bring logo section and hamburger button behind the mobile menu.
So when the user clicks on hamburger button they not going to see the logo section and hamburger button.
So I already did a z-index but don't work. Here a link to a site so re-size your screen to see the menu and don't have any javascript & jquery add to site at the moment.
Site Preview:
https://brandonpowell.github.io/alegacyleftbehind/
#media (max-width: 480px){
nav{
height:100%;
width:100%
}
nav .bottom-navbar{
background-color:#212121
}
nav .bottom-navbar .logo{
position:absolute
}
nav .bottom-navbar .bt-close{
position:absolute;
background-color:#51237f;
padding:9px;
display:block;
top:0;
width:100%
}
nav .bottom-navbar .bt-close .close-image{
width:50px;
padding:10px;
float:right;
}
nav .bottom-navbar .bt-close .main-title{
color:white;
padding:20px 10px;
text-transform:uppercase;
font-size:13pt;font-family:Montserrat,sans-serif;
letter-spacing:1px
}
nav .bottom-navbar .nav-menu{
display:block;width:34px;margin:36px;float:right
}
nav ul li{
float:none;
display:block;
letter-spacing:1px;
padding:1.9em 15px;
border-bottom:2px solid #2e2e2e;width:100%
}
nav ul li a{
color:white;
font-size:1.6em
}
li:hover{
background-color:#2e2e2e;
text-decoration:none;
color:#ffffff
}
ul{
padding-left:0px;
margin:0;
}
}
Have you considered changing their opacity to 0 and setting their pointer events to none instead of attempting to hide them behind the menu?
Visually it will have the same effect, and can be triggered with jQuery by adding a class to both. The CSS code for that class could be:
.hidestuff{
opacity:0;
pointer-events:none;
}
Once you remove this class they will go back to being visible and clickable. This has the added benefit of allowing for them to fade in and out using CSS transitions.
Andy
I'am trying to create a navigation menu with a sub menu, and fiddled with it today.
But i'am stuck at getting the sub menu of the parent menu to align it's links.
my HTML
<!-- navigation menu -->
<div class="MenuContainer">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Projects
<ul class="sub">
<li>Project1</li>
<li>Project2</li>
<li>Project3</li>
</ul>
</li>
</ul>
</div>
my CSS
.MenuContainer {
width:100%;
height:50px;
border:1px solid;
position:relative;
}
ul {
margin:0;
padding:0;
}
/*Main menu*/
li.menu {
height:50px;
float:left;
}
ul.menu li {
list-style:none;
float:left;
height:49px;
text-align:center;
}
ul.menu li a {
display:block;
padding:0 20px;
text-align:center;
font-size:17px;
line-height:49px;
text-decoration:none;
color:#5d5d5d;
}
ul.menu li:hover > a {
color:#fdfdfd;
}
ul.menu li:hover > ul {
display:block;
}
/*sub menu*/
li.sub {
height:40px;
float:left;
}
ul.sub li {
list-style:none;
float:left;
height:39px;
text-align:center;
}
ul.sub li a {
display:block;
padding:0 20px;
text-align:center;
font-size:17px;
line-height:39px;
text-decoration:none;
color:#5d5d5d;
}
If anyone can tell me where i went wrong please do. First time trying to create one from scratch.
Also if anyone know a good HTML5 / CSS3 forum / forums please don't hesitate to post a link. I have tried to find some but all are not serious or no active users.
Also this is my first post at stackoverflow so if i do a beginners mistake here, please just point it out.
Thanks on advance.
Hey i think you want this do the sun class position relative and sub ul give position absolute
.sub{
position:absolute;
}
ul.menu li {
position:relative;
}
Live demo http://jsfiddle.net/HVk4G/
Vertical menu Updated demo http://jsfiddle.net/HVk4G/1/
I hav a simple nav bar that i want to convert into a drop down nav bar, but i am not sure what i have to do to accomplish this. Do i need a certain javascript code or css. thanks
/* navigation menu */
div#navigation {
height:55px;
background:#0C1C29 url('images/nav-bg.png') repeat-x scroll top left;
}
div#innernav {
background:transparent url('images/nav-left.png') no-repeat scroll top left;
height:55px;
}
div#navigation ul {
background:transparent url('images/nav-right.png') no-repeat scroll top right;
list-style:none;
margin:0;
padding:0 10px;
position:relative;
top:0;
height:55px;
display:block;
}
div#navigation ul li {
display:block;
float:left;
}
div#navigation ul li a {
display:block;
float:left;
color:#ffffff;
border-bottom:none;
height:32px;
font-family:"Trebuchet MS", Verdana, Arial;
font-weight:bold;
font-size:1.2em;
padding:14px 20px 9px;
border-right:1px solid #060D14;
border-left:1px solid #244566;
}
div#navigation ul li.navleft a {
border-left:none;
}
div#navigation ul li.navright a {
border-right:none;
}
div#navigation ul li a:hover {
color:#FC8228;
}
<div id="navigation">
<div id="innernav">
<ul>
<!-- top navigation -->
<!-- add class navleft to first item and navright to last item as shown -->
<li class="navleft">home</li>
<li>examples</li>
<li>solutions</li>
<li>our service</li>
<li>support</li>
<li class="navright">contact</li>
</ul>
</div>
</div>
Here is an example that uses the suckerfish methodology:
http://jsfiddle.net/uCdGc/
Here is the magic CSS:
/* Code for dropdown */
#navigation ul li ul {
position: absolute;
left:-999em;
}
#navigation ul li ul li {
float:none;
/* put the rest of your styles here*/
}
#navigation ul li:hover ul, #navigation ul li.sfhover ul {
left:auto;
margin-top:55px;
}
For more on suckerfish, check out this url: http://www.htmldog.com/articles/suckerfish/dropdowns/
What I've done is added a ul element containing subnavigation elements to your "Examples" navigation item. When you hover over, the CSS will position the subnavigation so that it appears where you want it. This should work without any javascript, but if you want to support IE 6, you will need to include the jQuery javascript library and the code in the javascript block in the example.
Right now the subnavigation is styled plainly, but add more styles as you need. I've commented where you should add them.
Good luck.