Question

Я сделал все возможное, проверяя всю информацию и гуглял везде перед тем, как спрашивать здесь ... Надеюсь, я не избыточен.

Я пытаюсь создать статику c navbar вверху моей страницы в Bootstrap 4.3. Однако, как бы я ни старался, похоже, что он не работает:

- я пробовал некоторые из прежних .stati c -top / .navbar -stati c -top классы и другие подобные обходные пути;
- я также пытался установить плагины (которые я сейчас удалил из-за неэффективности) - хотя это в основном «скрывает» панель навигации вместо того, чтобы оставить он ставит c в самом верху страницы.
- я пытался изменить, но безрезультатно, мой CSS с " top: 0; " и другими тегами форматирования на соответствующей странице. elements.

Я снова очистил свой код, чтобы избежать путаницы, не работающей вместе. (моя предыдущая попытка Bootstrap завершилась в непригодном для использования коде, поэтому я стараюсь быть и оставаться чистым, и удалять неиспользуемый / ненужный код)

Чувствую себя совершенно потерянным. Не "супер-кодер", в основном дизайнер графических приложений c с большим пониманием логики c. И отчаянно нуждаюсь в какой-то функциональности по умолчанию, чтобы моя навигационная панель стала c.

Подвох в том, что моя навигационная панель должна оставаться прозрачной (это не так всегда так при работе с некоторыми классами)

Вот мой код.

/* 0. HTML Defaults
-----------------------------------------------------------------------------------------------------------------------------*/
:root {

	--da-pink: lightpink;
	--da-grey: rgba(5,5,5,1);
	--da-grey: #454545;
	--da-grey-grad: linear-gradient(to bottom right, #131313, #454545);
	--da-grey-opac: rgba(69, 69, 69, .8);
	--da-grey-opac: rgb(69, 69, 69);

}

html, body {
	background-color: black; 
    background: rgba(65,65,65,1);
    background: -moz-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(65,65,65,1)), color-stop(100%, rgba(5,5,5,1)));
    background: -webkit-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
    background: linear-gradient(135deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#414141', endColorstr='#050505', GradientType=1 );
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0;
	height: 100%;
	overflow: auto;
	z-index: 10;
}

html body * {

}


h1 {
	font-family: century-gothic, sans-serif; 
	font-weight: 700;
	font-style: normal;
	color: lightpink;
	font-size: 3vw;
	line-height: 4vw;
}

h2 {}
h3 {}
h4 {}
h5 {}
h6 {}


p {    
	font-family: itc-american-typewriter, serif;
    font-weight: 300;
    font-style: normal;
    font-size: 12.5pt;
    color: #ffffff;
    text-align: justify;
    text-decoration: none;
/*  text-indent: 50px; */
/*  word-spacing: 5px */
/*  white-space: pre; */
    letter-spacing: 1px;
/*  line-height: 1.3; */
/*  padding: 50px; */
    display: block;
    border:0;
	}

p a:link {
    text-decoration: none;
    border-bottom: dotted;	
	font-family: century-gothic, sans-serif; 
	font-weight: 700;
	font-style: normal;
	font-size: 12.5pt;
	color: lightpink;
}
p a:visited {
    text-decoration: none;
	font-family: century-gothic, sans-serif; 
	font-weight: 700;
	font-style: normal;
	font-size: 12.5pt;
	color: lightpink;
}
p a:hover {
    text-decoration: none;
    border-bottom: dotted;
	font-family: century-gothic, sans-serif; 
	font-weight: 700;
	font-style: normal;
	font-size: 12.5pt;
	color: lightpink;
}
p a:active {
    color: lightpink;
	font-family: century-gothic, sans-serif; 
	font-weight: 700;
	font-style: normal;
	font-size: 12.5pt;
	color: lightpink;
}  

p.error {}



a,
a:link {}
a:hover {}


/* 10. NAV
-----------------------------------------------------------------------------------------------------------------------------*/

body > #nav_desktop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

#nav_desktop > *,
#nav_desktop > div {
	background: none !important;
	/* background: rgba(0, 0, 0, .0) !important; */
}


.navbar {
	margin-bottom: 0;
	padding: 0 0;
	z-index: 100;
	} 


/*
.navbar-toggle {
     padding-top: 15px;
     margin-top: 0px;
     margin-bottom: 0;
} */

.navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

.nav_text {
	font-family: itc-american-typewriter, serif;
    font-weight: 300;
    font-style: normal;
    font-size: 12.5pt;
	color: #ffffff;
	letter-spacing: 2px;
}


/* 50. Header
-----------------------------------------------------------------------------------------------------------------------------*/
header {}


/* 60. Carousel Hero slider
-----------------------------------------------------------------------------------------------------------------------------*/
.carousel {
    top:0;
}

.hero-text {
	padding-top: 50px;
	padding-bottom: 50px;
	background-image: url('./logo_transp.png');
	background-size: auto;
	background-repeat: no-repeat;
	background-position: center -50px; 
	text-shadow: 1px 1px 3px black;
	text-align: center;
	position: absolute;
	top: 75%;
	left: 50%;
	transform: translate(-50%, -75%);
}

.carousel,
.item,
.active {
	height:100vh;
}

.carousel-inner {
	height:100vh;
}
	
.carousel-inner img {
	margin: auto;
}

/* Zz. Bootstrap edit
-----------------------------------------------------------------------------------------------------------------------------*/
.overlay {
	background: black;
	opacity: 0.7;
/*	background-size: cover; */
}


button {
    display: inline-block;
    border: 1px solid;
	border-color: white;
    padding: 10px 10px;
    margin: 0;
    text-decoration: none;
    background: none;
    color: white;
    font-family: century-gothic, sans-serif;
	font-weight:700;
	font-style: normal;
	font-size: 12 pt;
    text-align: center;

}

button:hover,
button:focus {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

button:focus {
    outline: 1px solid transparent;
    outline-offset: -4px;
}

button:active {
    transform: scale(0.99);
}

.clearfix::after {
  content: " ";
  clear: both;
  display: table;
}

.responsive-image {
	max-width: 100%;
	height: auto;
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

Заранее благодарю. Ang ie.

=====================================

Обновление:

в CSS, если я удаляю position: absolute; из body> #nav_desktop {, тогда моя навигационная панель становится прозрачной, но не сохраняется c.

Если я оставлю этот фрагмент, навигационная панель будет иметь статус c, но непрозрачная .

Цель - навигационная панель быть прозрачным, чтобы изображение карусели оставалось полностью видимым.

Mustapha Aoussar · Answer 1 · 04 февраля 2020

Просто переместите ваш карусельный div на верх, используя отрицательное значение margin-top:

#myCarousel {
    margin-top: -42px; /* set it equal to the menu height */
}

И измените position меню с абсолютного на относительное:

body > #nav_desktop {
    position: relative;
}

Angie · Answer 2 · 04 февраля 2020

Спасибо за все идеи и пожелания всех, это заставило меня переосмыслить, как я все это настрою.

Играя с некоторыми элементами (в конце концов, это всегда сводится к правильные классы), я нашел решение.

снимок экрана рабочего раствора

Атрибуты необходимо было переместить следующим образом:

#nav_desktop > *,
#nav_desktop > div {
    background: none !important;
    position: absolute;
    top: 0 !important;
    transform: translate(0%);

, который выглядел бы так, все вместе:

/*-----------------------------------------------------------------------------------------------------------------------------

	***		Angie's CSS File			|			The Design Angels											***
	---------------------------------------------------------------------------------------------------------------
	Version:			0.0.1
	Date:				02-02-2020

-----------------------------------------------------------------------------------------------------------------------------*/


/* 0. HTML Defaults
-----------------------------------------------------------------------------------------------------------------------------*/
:root {

	--da-pink: lightpink;
	--da-grey: rgba(5,5,5,1);
	--da-grey: #454545;
	--da-grey-grad: linear-gradient(to bottom right, #131313, #454545);
	--da-grey-opac: rgba(69, 69, 69, .8);
	--da-grey-opac: rgb(69, 69, 69);

}

html, body {
	background-color: black; 
    background: rgba(65,65,65,1);
    background: -moz-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(65,65,65,1)), color-stop(100%, rgba(5,5,5,1)));
    background: -webkit-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
    background: linear-gradient(135deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#414141', endColorstr='#050505', GradientType=1 );
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0;
	height: 100%;
	overflow: auto;
	z-index: 10;
}

html body * {

}


h1 {
	font-family: century-gothic, sans-serif; 
	font-weight: 700;
	font-style: normal;
	color: lightpink;
	font-size: 3vw;
	line-height: 4vw;
}

h2 {}
h3 {}
h4 {}
h5 {}
h6 {}


p {    
	font-family: itc-american-typewriter, serif;
    font-weight: 300;
    font-style: normal;
    font-size: 12.5pt;
    color: #ffffff;
    text-align: justify;
    text-decoration: none;
/*  text-indent: 50px; */
/*  word-spacing: 5px */
/*  white-space: pre; */
    letter-spacing: 1px;
/*  line-height: 1.3; */
/*  padding: 50px; */
    display: block;
    border:0;
	}

p a:link {
    text-decoration: none;
    border-bottom: dotted;	
	font-family: century-gothic, sans-serif; 
	font-weight: 700;
	font-style: normal;
	font-size: 12.5pt;
	color: lightpink;
}
p a:visited {
    text-decoration: none;
	font-family: century-gothic, sans-serif; 
	font-weight: 700;
	font-style: normal;
	font-size: 12.5pt;
	color: lightpink;
}
p a:hover {
    text-decoration: none;
    border-bottom: dotted;
	font-family: century-gothic, sans-serif; 
	font-weight: 700;
	font-style: normal;
	font-size: 12.5pt;
	color: lightpink;
}
p a:active {
    color: lightpink;
	font-family: century-gothic, sans-serif; 
	font-weight: 700;
	font-style: normal;
	font-size: 12.5pt;
	color: lightpink;
}  

p.error {}



a,
a:link {
	color: white;
	text-decoration:none;
}
a:hover {
	color: white;
	text-decoration:none;
}


/* 10. NAV
-----------------------------------------------------------------------------------------------------------------------------*/

body > #nav_desktop {

	left: 0;
	right: 0;
}

#nav_desktop > *,
#nav_desktop > div {
	background: none !important;
	position: absolute;
	top: 0 !important;
	transform: translate(0%);
	/* background: rgba(0, 0, 0, .0) !important; */
}


.navbar {
	margin-bottom: 0;
	padding: 0 0;
	z-index: 100;
	} 

.navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

.nav_text {
	font-family: itc-american-typewriter, serif;
    font-weight: 300;
    font-style: normal;
    font-size: 12.5pt;
	color: #ffffff;
	letter-spacing: 2px;
}


 @media only screen and (max-width: 768px) {
	 
	.navbar-brand > img {
		position: absolute !important;
		left: 50% !important;
		transform: translate(-50%) !important;
		}
 }

ul.d-md-inline > li { 
	display:inline !important; 
}


/* 50. Header
-----------------------------------------------------------------------------------------------------------------------------*/
header {}


/* 60. Carousel Hero slider
-----------------------------------------------------------------------------------------------------------------------------*/
.carousel {
    top:0;
}

.hero-text {
	padding-top: 50px;
	padding-bottom: 50px;
	background-image: url('./logo_transp.png');
	background-size: auto;
	background-repeat: no-repeat;
	background-position: center -50px; 
	text-shadow: 1px 1px 3px black;
	text-align: center;
	position: absolute;
	top: 75%;
	left: 50%;
	transform: translate(-50%, -75%);
}

.carousel,
.item,
.active {
	height:100vh;
}

.carousel-inner {
	height:100vh;
}
	
.carousel-inner img {
	margin: auto;
}

/* 100. Content
-----------------------------------------------------------------------------------------------------------------------------*/
content {}


/* 200. Specialties section
-----------------------------------------------------------------------------------------------------------------------------*/
.specialties {
	height: 375px;
	width: 29%;
	display: inline-box;
	column-gap: 5px !important;
	background-color: black; 
	background: rgba(65,65,65,1);
	background: -moz-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(65,65,65,1)), color-stop(100%, rgba(5,5,5,1)));
	background: -webkit-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
	background: -o-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
	background: -ms-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
	background: linear-gradient(135deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#414141', endColorstr='#050505', GradientType=1 );
	padding: 15px !important;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom:20px;
	}


/* 900. Footer
-----------------------------------------------------------------------------------------------------------------------------*/
footer {}


/* Zz. Bootstrap edit
-----------------------------------------------------------------------------------------------------------------------------*/
.overlay {
	background: black;
	opacity: 0.7;
/*	background-size: cover; */
}


button {
    display: inline-block;
    border: 1px solid;
	border-color: white;
    padding: 10px 10px;
    margin: 0;
    text-decoration: none;
    background: none;
    color: white;
    font-family: century-gothic, sans-serif;
	font-weight:700;
	font-style: normal;
	font-size: 12 pt;
    text-align: center;

}

button:hover,
button:focus {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

button:focus {
    outline: 1px solid transparent;
    outline-offset: -4px;
}

button:active {
    transform: scale(0.99);
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.responsive-image {
	max-width: 100%;
	height: auto;
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }


/* 10000. TEXT STYLING
-----------------------------------------------------------------------------------------------------------------------------*/
@media print {
    p {
        color: black;
    }
}

.tab { 
	text-indent: 40px; 
	}

Надеюсь, это может кому-нибудь помочь ...

Mateo Randwolf · Answer 3 · 04 февраля 2020

Bootstrap 4 поддерживает для панели навигации класс с именем fixed-top. Это позволяет вам сделать вашу панель навигации закрепленной на вершине простым классом.

Вам нужно добавить это к вашей навигации:

<nav id="nav_desktop" class="navbar navbar-expand-md fixed-top" role="navigation">

Вы можете найти больше информации об этом здесь .

Вот также быстрый пример, который я уже тестировал:

<!DOCTYPE html>
<html>
<head>
	<title>Welcome to the Design Angels</title>
	
	<!-- META DATA -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="Welcome to theDesignAngels, we make it look glittery and shiny."/>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="files/lib/jQuery.js"></script>
		<script src="files/lib/lib/popper/Popper.js"></script>
	<!-- BOOTSTRAP CSS -->
		<script src="files/lib/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="files/lib/bootstrap.min.css">

	<!-- Libraries & frameworks -->
		<script src="functions.js"></script>
		<link rel="stylesheet" style="text/css" href="style.css"/>
		<link rel="stylesheet" href="xxx">
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

		
		<link rel="shortcut icon" href="assets/favicon.jpg" type="image/x-icon" />
</head>
<body>


<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>


  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>

</body>
</html>

Bootstrap 4.3 Сделать Navbar Stati c вверху страницы И прозрачным

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 3 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Bootstrap 4.3 Сделать Navbar Stati c вверху страницы И прозрачным

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 3 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы