I am trying to leverage sticky properties to create a menu that stays fixed while scrolling. Am I missing a property? I have foundation properly configured and set up.
HTML:
<div class="fixed contain-to-grid">
<nav class="top-bar" data-topbar="">
<div class="top-bar-title">
<strong>Title Here</strong>
</div>
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">A</li>
<li class="menu-text">B</li>
<li class="menu-text">C</li>
<li class="menu-text">D</li>
</ul>
</div>
</nav>
</div>
CSS:
.top-bar{
height: 100px;
width: 100%;
color: white;
text-decoration: none;
font-size: 30px;
font-family: mainFont;
}
If you want to make the menu sticky, and don't move with scroll, then use fixed position.
.top-bar-left{
position: fixed;
}
Just add position: fixed; in the end as in the example
.top-bar{
height: 100px;
width: 100%;
color: white;
text-decoration: none;
font-size: 30px;
font-family: mainFont;
position: fixed;
}
Related
when i realized through Firefox inspector showing overflow in body element," is present in the page.I removed it(from inspector) but problem remains after refreshing the page.I tried using min-max h,w,still no changes.I am not able to catch the keyword i need solution.
code:
#navbar {
display: flex;
align-items: center;
position: relative;
top:0px;
margin-top: -18px;
}
#navbar::before {
content: "";
background-color: black;
height: 100%;
width: 100%;
position: absolute;
top:0px;
left:0px;
z-index: -1;
opacity: 1;
}
/* Nav Bar:Logo And Image */
#logo {
margin: 11px 30px;
}
<nav id="navbar">
<div class="logo">
<img src="logo1.png" alt="w8.com" id="img1">
</div>
<ul>
<li class="item">Home</li>
<li class="item">Top Searches</li>
<li class="item">About Us</li>
<li class="item">Places</li>
</ul>
</nav>
This is the portion where it is showing inverted commas in the top left corner.
**>**And this is the code from the inspector:
<body>"
<!-- <style>
#img1{
height: 66px;
margin: 8px 12px;
border-radius: 36px;
}
</style> -->
<nav id="navbar">
<div class="logo">
<img src="logo1.png" alt="w8.com" id="img1">
</div>
<ul>
<li class="item">Home</li>
<li class="item">Top Searches</li>
<li class="item">About Us</li>
<li class="item">Places</li>
</ul>
</nav>
i tried removing and rewriting the code but it didn't help.And about overflow i am not able do fix overflow.
I tried to add the footer, but it adds on top of the background-image at the bottom of my page. I tried to remove the "display:fixed" from footer, but the horizontal scroll shows up. How can I fix this?
I want the footer to be always visible on the screen when you scroll the page.
Here is more detail code snipet, I would appreciate if you guys can help with this.
html,
body {
height: 100%;
font-family: 'Google Sans',Roboto,Arial,sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
body {
background-image: url("/img/bg-new-edit.jpg");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-size: cover;
position: relative;
}
/* Basic styling */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
h2 {
font-weight: 350;
margin: 580px 40px;
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
color: gray;
text-align: center;
background-color: white;
}
}
<body>
<nav>
<ul class="menu">
<li class="logo"><img class="logo" src="img/TARRAHJEWELRY-LOGO.png"></li>
<li class="item">Home</li>
<li class="item">About</li>
<li class="item has-submenu dropdown">
<a tabindex="0">Bridal Jewelry</a>
<ul class="submenu dropdown-content">
<li class="subitem">Engagement</li>
<li class="subitem">Men Wedding</li>
<li class="subitem">Women Wedding</li>
</ul>
</li>
<li class="item has-submenu dropdown">
<a tabindex="0">Collection</a>
<ul class="submenu dropdown-content">
<li class="subitem">Ring</li>
<li class="subitem">Necklace</li>
<li class="subitem">Earring</li>
<li class="subitem">Bracelet</li>
</ul>
</li>
<li class="item">Contact
</li>
<li class="item button">My Account</li>
<li class="item button">Cart</li>
<li class="toggle"><i class="fas fa-bars"></i></li>
</ul>
</nav>
<h2>We believe people who live life in their special way,<br> deserve unique jewelry.</h2>
<footer><p>Footer</p></footer>
<div class="clearfix"></div>
</body>
select the footer
footer {
bottom: 0;
position: fixed
}
note that this will cause a scroll bar to appear
to remove the scroll bar
body {
overflow: hidden
}
That should solve your problem
I am trying to get the second navbar to align on the right, I have tried adding float:right and have tried adding a margin on the right to space out the words but does not work. Tried removing the nav tag and replacing it with section but it does not work.
/* NAV ON TOP*/
.pagetopTop{
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 500;
transition: ease-in-out 0.3s;
padding-bottom: 20px;
}
.topNav{
display: flex;
float: right;
}
.Topspan{
margin: var(--size-10);
}
/*navbar*/
.navbar .container{
top: 0;
right: 0;
left: 0;
z-index: 500;
transition: ease-in-out 0.3s;
display:flex
}
.navbar-brand{
height: var(--size-50);
margin-top: var(--size-40);
cursor: pointer;
}
.navbar-nav{
display: flex;
align-items: center;
}
.navbar-nav li{
align-items: center;
position: absolute;
}
body{
font-family: "Source Sans Pro", sans-serif;
font-weight: 400;
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: 0;
color: var(--font-color-base);
margin: 0;
padding: 0;
}
*,
::after,
::before{
box-sizing: border-box;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
a{ text-decoration: none;}
p{ margin-top: 0;}
h2{
font-size: 1.75rem;
font-weight: 500;
line-height: 1.2;
}
img{
max-width: 100%;
vertical-align: middle;
border-style: none;
}
.container{
width: 100%;
padding-left: 40px;
padding-right: 40px;
margin-left: auto;
margin-right: auto;
}
<body>
<section id="pagetopTop" class="pagetopTop">
<div class="container">
<i class="fas fa-angle-left"></i>
<span class="Topspan">Main Demos</span>
<ul class="topNav">
<li class="nav-link">
<span class="Topspan">Demos</span>
<i class="fas fa-angle-down"></i>
</li>
<li class="nav-link">
<span class="Topspan">Docs</span>
<i class="fas fa-angle-down"></i>
</li>
</ul>
</div>
</section>
<nav id="Nav" class="navbar nav">
<div class="container">
<a href="" class="">
<img src="Week5saasappassets-210323-142515 (1)/Week-5-saas-app-assets/project_logo/logo.svg" alt="Company logo" class="navbar-brand">
</a>
<ul class="navbar-nav">
<li class="nav-link">
Home
</li>
<li class="nav-link">
Features
</li>
<li class="nav-link">
Learn
</li>
<li class="nav-link">
Price
</li>
<li class="nav-link">
Hire us
</li>
</ul>
</div>
</nav>
</body>
Maybe because of the margins or parent elements overlapping each other.
want to move the ul list to the other side beneath demos and space it out
There are a few issues here, in terms of HTML semantics, it doesn't make a lot of sense to use <section> for a nav menu. The <section> represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. A page without content and only a navigation menu wouldn't make very much sense.
Use a more semantic element like <nav> which represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. At worse, a division element <div> which doesn't have semantic meaning would make more sense than a <section> for a navigation menu. Also, you have display: flex and float: right on the .topNav container. Flexbox is the "newer" way to distribute space for items along a single axis so use one or the other, not both.
Instead of using a float to create layouts by floating elements to the left or the right, flexbox allows you to create layouts by aligning items to a single axis. The axis can be horizontal or vertical. It is best used for distributing space for items in the same axis
Your using a bunch of FontAwesome icons but didn't include the <script> tag in your example so none of them rendered. Next, the position: fixed on the <section> container paired with absolute positioning of the <li> elements, this is causing some of the menu items to overlap since your taking the content out of the "normal flow". Unless that was intended, I'm not sure what the exact "expected output" is since you didn't include a picture.
For positioning two elements at opposite sides in a row, just use a Flexbox layout to distribute "space between" the two nav menus in the <body> using justify-content: space-between. I added a nested <div> to the <body> that will act as the flex container containing the two <nav> menus. You can also vertically align flex items (e.g. the two nav menus) along the cross-axis with align-items: center. I will let you take it from here to style the nav menus on each side of the viewport how you would like.
/* NAV ON TOP*/
.flexbox {
display: flex;
justify-content: space-between;
align-items: center;
}
.pagetopTop{
/*position: fixed;
top: 0;
right: 0;
left: 0;*/
z-index: 500;
transition: ease-in-out 0.3s;
padding-bottom: 20px;
}
.topNav{
display: flex;
justify-content: space-between;
align-items: center;
}
.Topspan{
margin: var(--size-10);
}
/*navbar*/
.navbar .container{
/*top: 0;
right: 0;
left: 0;*/
z-index: 500;
transition: ease-in-out 0.3s;
display:flex;
align-items: center;
margin-top: 1rem;
}
.navbar-brand{
height: var(--size-50);
margin-top: var(--size-40);
cursor: pointer;
}
.navbar-nav{
display: flex;
flex-direction: column;
align-items: center;
}
.navbar-nav li{
align-items: center;
/*position: absolute;*/
}
body{
font-family: "Source Sans Pro", sans-serif;
font-weight: 400;
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: 0;
color: var(--font-color-base);
margin: 0;
padding: 0;
}
*,
::after,
::before{
box-sizing: border-box;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
a{ text-decoration: none;}
p{ margin-top: 0;}
h2{
font-size: 1.75rem;
font-weight: 500;
line-height: 1.2;
}
img{
max-width: 100%;
vertical-align: middle;
border-style: none;
}
.container{
width: 100%;
padding-left: 40px;
padding-right: 40px;
margin-left: auto;
margin-right: auto;
}
<body>
<div class="flexbox">
<nav id="pagetopTop" class="pagetopTop">
<div class="container">
<i class="fas fa-angle-left"></i>
<span class="Topspan">Main Demos</span>
<ul class="topNav">
<li class="nav-link">
<span class="Topspan">Demos</span>
<i class="fas fa-angle-down"></i>
</li>
<li class="nav-link">
<span class="Topspan">Docs</span>
<i class="fas fa-angle-down"></i>
</li>
</ul>
</div>
</nav>
<nav id="Nav" class="navbar nav">
<div class="container">
<a href="" class="">
<img src="https://dynamic.brandcrowd.com/asset/logo/8cb54db0-7219-4bf6-bba3-1c9e94078516/logo?v=4" width="60" height="60" alt="Company logo" class="navbar-brand">
</a>
<ul class="navbar-nav">
<li class="nav-link">
Home
</li>
<li class="nav-link">
Features
</li>
<li class="nav-link">
Learn
</li>
<li class="nav-link">
Price
</li>
<li class="nav-link">
Hire us
</li>
</ul>
</div>
</nav>
</div>
<!-- Font Awesome Script -->
<script src="https://kit.fontawesome.com/e03d7ac5cf.js" crossorigin="anonymous"></script>
</body>
I have created a bubble conversation html.
Now I am trying to add a footer to it.
(Footer similar code in https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fixed_footer)
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
clear: both;
padding: 5px;
border-radius: 20px;
margin-bottom: 2px;
width: 80%;
background: #eee;
}
.him {
float: left;
border: 1px solid #000000;
}
.me {
float: right;
}
#footer {
height: 30px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
body {
padding-bottom: 30px;
}
<div>
<div>
<ul>
<li class="me">N-19</li>
<li class="me">N-18</li>
<li class="him">N-17</li>
<li class="me">N-16</li>
<li class="me">N-15</li>
<li class="me">N-14</li>
<li class="him">N-13</li>
<li class="me">N-12</li>
<li class="me">N-11</li>
<li class="me">N-10</li>
<li class="me">N-9</li>
<li class="me">N-8</li>
<li class="him">N-7</li>
<li class="me">N-6</li>
<li class="me">N-5</li>
<li class="me">N-4</li>
<li class="me">N-3</li>
<li class="me">N-2</li>
<li class="me">N-1</li>
<li class="him">N</li>
</ul>
</div>
<div id="footer">
Footer
</div>
</div>
But I am not seeing the last lines of the conversation. The problem is that the footer is overlaping them because of the float property of the < li > elements.
How can I avoid it?
check this out: css grid is a very good property of css.
we can divide screen into number of columns and rows . i used here css-grid.
for more info on css-grid read
https://css-tricks.com/snippets/css/complete-guide-grid/
ul {
list-style: none;
margin: 0;
padding: 0;
display:grid;
grid-template-columns:33% 33% 34%;
}
ul li {
display: block;
clear: both;
padding: 5px;
border-radius: 20px;
margin-bottom: 2px;
background: #eee;
}
.him {
grid-column:1/3;
border: 1px solid #000000;
}
.me {
grid-column:2/4
}
#footer {
height: 30px;
position: fixed;
bottom:0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
body {
padding-bottom: 30px;
}
<div>
<div>
<ul>
<li class="me">N-19</li>
<li class="me">N-18</li>
<li class="him">N-17</li>
<li class="me">N-16</li>
<li class="me">N-15</li>
<li class="me">N-14</li>
<li class="him">N-13</li>
<li class="me">N-12</li>
<li class="me">N-11</li>
<li class="me">N-10</li>
<li class="me">N-9</li>
<li class="me">N-8</li>
<li class="him">N-7</li>
<li class="me">N-6</li>
<li class="me">N-5</li>
<li class="me">N-4</li>
<li class="me">N-3</li>
<li class="me">N-2</li>
<li class="me">N-1</li>
<li class="him">N</li>
</ul>
</div>
<div id="footer">
Footer
</div>
</div>
Due to padding-bottom could not be applied here, my answer didn't fit in the case, therefore I've done a research on the alternatives for a grid layout proposed and, surprisingly, for the fixed positioning of the footer block.
In this example I've decided to leave the code without the <ul> which has quite a big list of default element css values. I supposed that the first message always comes from the user, and used :not() CSS selector to style the replies blocks. You can change .user and :not(user) to any classes like .me and .him according to your HTML.
section {display:flex;flex-direction:column}
section * {
width: 75%;
border: 1px solid #757575;
border-radius:20px;
padding:2px 10px;
margin-bottom:2px
}
.user {
background:#ccc;
margin-left: auto
}
section :not(.user) {
background:#eee
}
section :not(.user) + .user, .user + :not(.user) {
margin-top:5px
}
footer {
height: 30px;
position: sticky; /* Yes. It works now */
bottom: 0;
background: #000;
color: white;
text-align: center;
line-height: 28px
}
<section>
<div class="user">Need some help with HTML</div>
<div class="user">And CSS maybe</div>
<div class="user">Want it to work with long-lenth messages as well, you know. And in all the browsers, even IE...</div>
<div>Sure</div>
<div>Lets test this one</div>
<div>Quite a good in terms of browser support in 2019</div>
<div class="user">Awsome!</div>
<div class="user">Thank you so much</div>
<div>You are welcome</div>
<div class="user">Goodbye</div>
</section>
<footer>
<p>Sticky Footer</p>
</footer>
I've almost got my dropdown menu working, but I can't get the dropdown content to appear underneath the head when it's clicked. It's moved off to the side. What's causing that? Is it improperly written position?
Fiddle: https://jsfiddle.net/kiddigit/8sxj3eeg/
* {
font-family: garamond;
line-height: 1.9em;
}
.dropdownwrapper {
padding-top: 2px;
}
.dropbtn {
color: black;
padding: 13px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-content {
/* display: none;*/
position: absolute;
}
.dropdown-content a {
color: white;
padding: 0 27.5px ;
text-decoration: none;
display: block;
background-color: #3f3f3f;
}
.dropdown-content a:hover {
color: #a9a9a9;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: black;
color: white;
}
header {
border-bottom: 5px solid;
margin-bottom: 10px;
overflow: hidden;
}
header ul {
float: right;
list-style-type: none;
margin-top: 22px;
padding:0;
width: 50%;
}
header li {
float: right;
}
header li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
header li a:hover {
background-color: #111;
color: white;
}
header h1 {
float: left;
text-align: left;
line-height: 0;
font-size: 2em;
}
<header>
<h1>Father Bart Gage</h1>
<ul>
<li><a id="about" href="#">ABOUT</a></li>
<li>CONTACT</li>
<div class="dropdownwrapper">
<div class="dropdown">
<li><div class="dropbtn" onClick=”return true”>SCRIPTURE</div></li>
<div class="dropdown-content">
<a id="mark" href="#">Mark</a>
<a id="matthew" href="#">Matthew</a>
<a id="luke" href="#">Luke</a>
<a id="john" href="#">John</a>
</div>
</div>
</div>
</ul>
</header>
You have to move the dropdown-content element into the list item:
<div class="dropdown">
<li>
<div class="dropbtn" onClick=”return true”>SCRIPTURE</div>
<div class="dropdown-content">
<a id="mark" href="#">Mark</a>
<a id="matthew" href="#">Matthew</a>
<a id="luke" href="#">Luke</a>
<a id="john" href="#">John</a>
</div>
</li>
</div>
There's a couple things going on that probably need some attention.
First, a <div> element is not technically "legal" as a direct child of a ul element. The only direct child of a ul should be a li. To solve this, I've moved your dropdown divs inside the li.
Second, you may be suffering a bit of "div-itis". You probably (definitely?) don't need so many div elements to accomplish what you want. I've proposed alternate markup below your markup below.
Third, it's all about position: when you set position: absolute, the position (top, right, bottom, left) are relative to the nearest parent with position: relative. Therefore, you probably want to be sure your li elements have position: relative.
Your original markup, with the divs enclosed in the li
<header>
<h1>Father Bart Gage</h1>
<ul>
<li><a id="about" href="#">ABOUT</a></li>
<li>CONTACT</li>
<li>
<div class="dropdownwrapper">
<div class="dropdown">
<div class="dropbtn" onClick=”return true”>SCRIPTURE</div>
<div class="dropdown-content">
<a id="mark" href="#">Mark</a>
<a id="matthew" href="#">Matthew</a>
<a id="luke" href="#">Luke</a>
<a id="john" href="#">John</a>
</div>
</div>
</div>
</li>
</ul>
</header>
Alternate proposed markup
(note that this also requires altered styles - see the fiddle for those!)
<header>
<h1>Father Bart Gage</h1>
<ul>
<li><a id="about" href="#">ABOUT</a></li>
<li>CONTACT
<!-- nested ul for the dropdown, rather than divs -->
<li>
<div class="dropbtn" onClick=”return true”>SCRIPTURE</div>
<ul class="dropdown dropdown-content">
<li><a id="mark" href="#">Mark</a></li>
<li><a id="matthew" href="#">Matthew</a></li>
<li><a id="luke" href="#">Luke</a></li>
<li><a id="john" href="#">John</a></li>
</ul>
</li>
</ul>
</header>
Working Fiddle using the alternate proposed markup.