Как сделать так, чтобы панель навигации не пересекала полосу прокрутки ⇐ CSS

Разбираемся в CSS
Ответить
Anonymous
 Как сделать так, чтобы панель навигации не пересекала полосу прокрутки

Сообщение Anonymous »

У меня проблема с тем, что панель навигации выходит за полосу прокрутки, и я, хоть убей, не могу понять, почему. Я везде искал подобную проблему, но ничего не нашел. Если бы кто-нибудь мог помочь, это спасло бы жизнь.

Код: Выделить всё

body,
html {
height: 100%;
margin: 0;
font-size: 15px;
font-family: 'Glacial Indifference', sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #737373;
overflow-x: hidden;
}

.container {
width: 100%;
height: 100%;
box-sizing: border-box;
z-index: 1;
/*smooths scroll css
overflow-y:hidden;
scroll-behavior:smooth;
scroll-snap-type:y mandatory;*/
}

/*N A V B A R*/

.navbar {
position: absolute;
top: 0;
left: 0;
z-index: 2;
display: flex;
width: 100%;
height: 60px;
background: rgba(0, 0, 0, 0.6);
}

.navbar ul {
display: flex;
list-style: none;
width: 100%;
justify-content: center;
}

.navbar ul li {
margin: 0 1rem;
padding: 0 0.9rem;
}

.navbar ul li a {
font-size: 1.7rem;
text-decoration: none;
text-transform: uppercase;
color: #f0e9e5;
}

.navbar ul li a:hover {
color: #988e97;
transition: all 0.5s ease-out;
}

.navbar img {
height: 55px;
margin-top: -15px;
}

/*B G-I M G S*/

.pimg1,
.pimg2,
.pimg3,
.pimg4,
.pimg5 {
opacity: 0.9;
position: relative;
background-size: cover;
background-repeat: no-repeat;
/*
fixed=parallax
scroll=normal
*/
background-attachment: fixed;
}

.pimg1 {
background-image: url(img/home.png);
background-position: top;
min-height: 570px;
}

.pimg2 {
background-image: url(img/about.png);
background-position: center;
min-height: 400px;
}

.pimg3 {
background-image: url(img/faq.png);
background-position: center;
min-height: 400px;
}

.pimg4 {
background-image: url(img/ty.jpg);
background-position: center;
min-height: 400px;
}

.pimg5 {
background-image: url(img/footer.png);
background-position: center;
min-height: 400px;
}

/*S E C T I O N S*/

section {
text-align: center;
padding: 50px 80px;
/*scroll snap
scroll-snap-align:center;*/
}

h1 {
font-size: 2.5rem;
letter-spacing: 3px;
text-transform: uppercase;
}

p {
font-size: 1.4rem;
}

/*A B O U T*/

section#about {
background-color: #282e34;
color: #e2d9d0;
}

.p-flex {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
grid-gap: 50px;
}

.polaroid {
width: 250px;
background-color: rgba(226, 217, 208, 0.7);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
border-radius: 3px;
padding: 20px;
}

.polaroid img {
width: 100%;
box-shadow: 0 0 3px #212121;
}

.ptext {
text-align: center;
padding: 10px 20px;
color: #282e34;
}

.ptext p {
font-size: 1.2rem;
font-weight: 200;
text-align: justify;
}

.ptext h1 {
font-size: 1.3rem;
font-weight: 900;
letter-spacing: 2px;
text-align: center;
}

/*F A Q*/

section#faq {
background-color: #282e34;
color: #e2d9d0;
}

section#faq details {
text-align: left;
padding-bottom: 30px;
}

section#faq summary {
font-size: 1.6rem;
font-weight: 600;
letter-spacing: 1px;
text-decoration: #737373 underline double;
}

section#faq details p {
padding: 0 30px;
font-size: 1.4rem;
}

section#faq details a {
color: #988e97;
}

section#faq details a:hover {
color: #c4aea8;
transition: all 0.5s ease-out;
}

.step {
text-decoration: #737373 underline double;
font-weight: 600;
}

.important {
text-decoration: underline dotted;
letter-spacing: 2px;
text-transform: uppercase;
}

.note {
text-decoration: underline dotted;
}

.q-links {
padding-left: 25px;
}

/*T H A N K-Y O U*/

section#ty {
background-color: #282e34;
color: #e2d9d0;
}

.img-containers {
box-sizing: border-box;
display: flex;
flex-direction:  row;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
}

.img-box {
background-color: #f0e9e5;
display: flex;
justify-content: center;
align-items: center;
width: 175px;
height: 175px;
border-radius: 10px;
margin-bottom: 20px;
padding: 0 10px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}

.img-box:hover {
background-color: #212121;
transition: all 0.5s ease-in;
border-radius: 5px;
}

section#ty img {
width: 100%;
}

/*C O N T A C T*/

section#contact {
background-color: #e2d9d0;
color: #282e34;
}

h2 {
font-size: 1.8rem;
text-transform: uppercase;
letter-spacing: 3px;
}

section#contact img {
width: 100%;
background-color: #f0e9e5;
}

/*section#contact img:hover {
background-color:#fff;
transition: all 0.5s ease-in;
border-radius:5px;
}*/

/*FORM*/

form {
background-color: #f0e9e5;
border-radius: 10px;
border: 5px double #282e34;
}

form p {
font-size: 1.1rem;
font-weight: 600;
}

form .info {
margin-top: -10px;
font-size: 1.1rem;
letter-spacing: 0;
font-weight: 400;
}

label {
font-size: 1.1rem;
font-family: 'Playfair Display', sans-serif;
font-weight: 400;
letter-spacing: 1px;
margin-right: 5px;
}

input {
font-size: 1rem;
font-family: 'Playfair Display', sans-serif;
font-weight: 400;
padding: 7px 15px;
}

input:focus {
border: 2px solid #282e34;
border-radius: 1px;
outline: none;
transition: all 0.5s ease-in;
}

textarea {
font-size: 1rem;
font-family: 'Playfair Display', sans-serif;
font-weight: 400;
width: 500px;
height: 100px;
}

input[type=checkbox] {
margin: 5px;
}

select {
padding: 5px;
border: 1px solid gray;
border-radius: 3px;
background-color: #fff;
font-size: 1rem;
font-family: 'Playfair Display', sans-serif;
font-weight: 400;
}

option {
font-size: 1rem;
font-family: 'Playfair Display', sans-serif;
font-weight: 400;
}

/*F O O T E R*/

section#footer {
background-color: #282e34;
color: #f0e9e5
}

h3 {
font-family: 'Glacial Indifference', sans-serif;
font-size: 2.6rem;
letter-spacing: 7px;
font-weight: 400;
margin-top: 0;
}

h4 {
font-family: 'Playfair Display SC Black', serif;
font-size: 5rem;
letter-spacing: 8px;
margin-top: -10px;
}

section#footer p {
font-size: 1.3rem;
margin-top: -55px;
}

.bold {
font-weight: 900;
letter-spacing: 1px;
text-align: center;
}

h5 {
font-size: 2rem;
letter-spacing: 2px;
}

.pages {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-items: space-around;
}

.footer-box {
background-color: #f0e9e5;
display: flex;
width: 90px;
height: 90px;
border-radius: 5px;
padding: 5px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}

section#footer img {
width: 100%;
}

h6 {
font-size: 1.2rem;
letter-spacing: 2px;
color: #f0e9e5;
margin-bottom:  0;
}

Код: Выделить всё








[*]
Las Vegas DJ Agency








[list]

[url=#home]Home[/url]

[*]
[url=#about]About[/url]

[*]
[img]img/hp.png[/img]
[*]
[url=#faq]F.A.Q.[/url]

[*]
[url=#contact]Contact[/url]

[/list]






About Las Vegas DJ Agency
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, asperiores!


[img]img/c.jpg[/img]

Corporate Events
We harness the power of music and align the right DJs that suit your brands vision.



[img]img/n.jpg[/img]

Nightlife
Veteran DJs who understand how to maximize liquor sales and guest experience.



[img]img/p.jpg[/img]

Private Parties
Masters of their craft, our DJs are ready to perform for your next event.






Frequently Asked Questions

How much does hiring a DJ cost?
Typically starts $150 per hour, but price will negotiated with client based on their needs.
**Initial consultation is free and discounts offered for events Monday-Thursday.



What forms of payment does LVDJ Agency take?
Apple Pay, Cash, Check, Credit/Debit Card, Paypal, Venmo, Zelle and CashApp.



Does LVDJ Agency travel?
Yes, but currently only within the United States. Travelling costs will be discussed in the consultation phase.



What is the process of hiring a Las Vegas DJ?
• Step 1 - Fill out submit the Request a DJ form on our [url=#contact]contact page[/url].
• Step 2 - Within 48 hours of form submission our Director of Talent will reach out to you for consultation on your event. We will discuss the logistics such as guest demographic, musical expectations, preferred attire
for your DJ, PA (sound system) and DJ equipment.  Overall, we will discuss exactly how you envision your event to be.
• Step 3 - After discussing the details and pricing of your event, an agreed upon deposit for reservation will be required to secure the event date, time and DJ services.
• Step 4 - We introduce you to your DJ and create a plan of action for your event.
• Step 5 - A follow-up will be made 72 hours before the scheduled event to confirm all the details and review any changes or client updates.
**The balance left of the agreed upon price must be paid prior to the day of the event.
• Step 6 - DJ will arrive in expected attire, and no later than 30 minutes before the event start time (unless extraneous circumstances occur) to set up agreed upon equipment (if any). Equipment will be set up neatly.
**Wireless technology is available for a cleaner and more professional experience.
• Step 7 - Music will begin at arranged time, and our DJ will utilize their skills to meet your event expectations.  Now you just have to sit back and enjoy!
• Step 8 - Leaving a review for Las Vegas DJ Agency! If we did an exceptional job then please write a review on one of our following pages.
• [url=https://www.google.com/maps/place//data=!4m3!3m2!1s0xa5ef86b9b7361a7:0xc3bf91a80d9faced!12e1?source=g.page.m.rc._&laa=merchant-web-dashboard-card]Google[/url] • [url=https://www.thumbtack.com/nv/las-vegas/djs/las-vegas-dj-agency/service/425970420881645592]Thumbtack[/url] • [url=https://www.gigsalad.com/las_vegas_dj_agency_las_vegas]Gigsalad[/url] • [url=https://www.bark.com/en/us/company/las-vegas-dj-agency/yQ8BE/]Bark[/url] • [url=https://fash.com/nv/las-vegas/djs/las-vegas-dj-agency]Fash[/url] • [url=https://www.thebash.com/dj/las-vegas-dj-agency]The Bash[/url]  • & l t ; / s p a n & g t ; & l t ; / p & g t ; < b r   / >             & l t ; / d e t a i l s & g t ; < b r   / >         & l t ; / s e c t i o n & g t ; < b r   / > < b r   / >         & l t ; d i v   c l a s s = " p i m g 3 " & g t ; & l t ; / d i v & g t ; < b r   / > < b r   / >         & l t ; s e c t i o n   i d = " t y " & g t ; < b r   / >             & l t ; h 1 & g t ; T h a n k   Y o u & l t ; / h 1 & g t ; < b r   / >             & l t ; p & g t ; T h a n k   y o u   f o r   c h o o s i n g   u s   a n d   w e   a p p r e c i a t e   y o u r   p a r t n e r s h i p ! & l t ; / p & g t ; < b r   / >             & l t ; d i v   c l a s s = " i m g - c o n t a i n e r s " & g t ; < b r   / >                 & l t ; d i v   c l a s s = " i m g - b o x " & g t ; & l t ; i m g   s r c = " c o p y r i g h t / 1 . p n g "   a l t = " A l d o   L o g o " & g t ; & l t ; / d i v & g t ; < b r   / >                 & l t;div class="img-box">
[img]copyright/2.png[/img]

[img]copyright/3.png[/img]
[img]copyright/4.png[/img]
[img]copyright/5.png[/img]
[img]copyright/6.png[/img]
[img]copyright/7.png[/img]
[img]copyright/8.png[/img]
[img]copyright/9.png[/img]
[img]copyright/10.png[/img]
[img]copyright/11.png[/img]
[img]copyright/12.png[/img]
[img]copyright/13.png[/img]
[img]copyright/14.png[/img]
[img]copyright/15.png[/img]
[img]copyright/16.png[/img]
[img]copyright/17.png[/img]
[img]copyright/18.png[/img]
[img]copyright/19.png[/img]
[img]copyright/20.png[/img]
[img]copyright/21.png[/img]
[img]copyright/22.png[/img]
[img]copyright/23.png[/img]
[img]copyright/24.png[/img]
[img]copyright/25.png[/img]
[img]copyright/26.png[/img]
[img]copyright/27.png[/img]
[img]copyright/28.png[/img]
[img]copyright/29.png[/img]
[img]copyright/30.png[/img]
[img]copyright/31.png[/img]
[img]copyright/32.png[/img]
[img]copyright/33.png[/img]
[img]copyright/34.png[/img]
[img]copyright/35.png[/img]
[img]copyright/36.png[/img]
[img]copyright/37.png[/img]
[img]copyright/38.png[/img]
[img]copyright/39.png[/img]
[img]copyright/40.png[/img]
[img]copyright/41.png[/img]
[img]copyright/42.png[/img]
[img]copyright/43.png[/img]
[img]copyright/44.png[/img]
[img]copyright/45.png[/img]




Contact Us
Phone:  702-843-6852 | Email: matthew.lucio@gmail.com | WhatsApp:  702-882-3195
Check out our pages

[url=https://./maps/taNgWpPXCmZewQGV7]
[img]img/google.png[/img]
[/url]
[url=https://www.thumbtack.com/nv/las-vegas/djs/las-vegas-dj-agency/service/425970420881645592]
[img]img/thumb.png[/img]
[/url]
[url=https://www.gigsalad.com/las_vegas_dj_agency_las_vegas]
[img]img/gig.png[/img]
[/url]
[url=https://www.bark.com/en/us/company/las-vegas-dj-agency/yQ8BE/]
[img]img/bark.png[/img]
[/url]
[url=https://fash.com/nv/las-vegas/djs/las-vegas-dj-agency]
[img]img/fash.png[/img]
[/url]
[url=https://www.thebash.com/dj/las-vegas-dj-agency]
[img]img/bash.png[/img]
[/url]


Request a DJ


Preferred Name


Phone Number


Email


Company Name


Preferred Contact Method
Phone: Text
Phone: Call
WhatsApp
Email

Event Type
If choosing an 'Other' label, please add details about the event in 'Event Notes' section.

Select
Live Concert/Entertainment/Event
Live Stream
Wedding
Private: Specialty Event (Graduation, Prom/School Dances, etc.)
Private: Specialty Party (Birthday, Reunion, etc.)
Private: Other
Fundrasier/Non-Profit Event
Corporate: In-Store Retail
Corporate: Product Launch
Corporate:  Other


Event Location

Select
Bar/Lounge
Nightclub
Resturant
Entertainment Venue
Outdoors
Residence
Other (Add in the Event Notes)


Genre of Music
**If you have your own playlist you want played, just type playlist


Age Range of Guests
76-58
57-42
41-21
20-18
17-12
Under 12 years of age

Date of the Event


Event Location


DJ Start Time


DJ End Time


Will DJ equipment and PA system (a.k.a. sound system or speakers) be provided?
**If providing equipment, please list all equipment specifications in the Provided Equipment section.

Select
Yes, we will provide a PA system (Sound System) and DJ equipment for usage.**
Yes. DJ needs to provide their own equipment, but PA System will be provided.**
Yes. DJ Equipment will be provided, but will need PA System.
No. DJ needs to provide euipment and PA System.
Not sure at this time.


Provided DJ Equipment and/or PA System.  As well as PA System requests, if any.


Event Notes


Questions


 




LAS VEGAS DJ
[h4]AGENCY[/h4]
Phone: 702-843-6852 | Email: matthew.lucio@gmail.com | WhatsApp: 702-882-3195
Leave a Review or Contact Us

[url=https://./maps/taNgWpPXCmZewQGV7]
[img]img/google.png[/img]
[/url]
[url=https://www.thumbtack.com/nv/las-vegas/djs/las-vegas-dj-agency/service/425970420881645592]
[img]img/thumb.png[/img]
[/url]
[url=https://www.gigsalad.com/las_vegas_dj_agency_las_vegas]
[img]img/gig.png[/img]
[/url]
[url=https://www.bark.com/en/us/company/las-vegas-dj-agency/yQ8BE/]
[img]img/bark.png[/img]
[/url]
[url=https://fash.com/nv/las-vegas/djs/las-vegas-dj-agency]
[img]img/fash.png[/img]
[/url]
[url=https://www.thebash.com/dj/las-vegas-dj-agency]
[img]img/bash.png[/img]
[/url]

Las Vegas DJ Agency® 2022



Подробнее здесь: https://stackoverflow.com/questions/724 ... scroll-bar
Вернуться к началу
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»