引导程序/导航栏颜色和左侧菜单

时间:2018-08-20 15:40:23

标签: css sass bootstrap-4 navbar

我是新来的,希望您能帮助我。我不会说英语。

  1. 我在navbar-toggler-icon上遇到问题。我看不到所有内容居中(如图所示)enter image description here

我的代码:

.navbar-dark-custom {
	background-color: $color-primary-dark;
	color: $white;
	
	a {
		color: darken($white,10%);
		font-weight: 600;
		text-transform: uppercase;
		&:hover {
			color: $color-secondary-light;
		}
    	
    	&:active {
    		color: $color-secondary-dark;
    	}
	}

	.navbar-brand {
		color: $white;
		text-transform: none;
		font-weight: 300;
	}

	.navbar-nav {
		padding-left: 50%;
		// float: right;
		// padding-right: 0;
	}

	.navbar-toggler { 
		background-color: darken($color-primary-dark, 5%);
		border-color: $color-primary;

	.navbar-toggler-icon {
    	border-color: $white;
  		}

	}

}
<!-- Menu navbar -->

	<nav class="navbar navbar-expand-lg sticky-top navbar-dark-custom">
		<div class="container">
			<a class="navbar-brand" href="#">Natalia Waśko</a>

				<!-- fragment odpowiedzialny za menu rozwijane na komórkach -->
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navContent" aria-label="Toggle navigation">
				    <span class="navbar-toggler-icon"></span>
				</button>
			
			<div class="collapse navbar-collapse" id="navContent">
				<ul class="navbar-nav">
					<li class="nav-item active"><a href="#" class="nav-link">Główna</a></li>
					<li class="nav-item"><a href="#" class="nav-link">Aktualności</a></li>
					<li class="nav-item"><a href="#" class="nav-link">Oferta</a></li>
					<li class="nav-item"><a href="#" class="nav-link">Portfolio</a></li>
					<li class="nav-item"><a href="#" class="nav-link">Kontakt</a></li>
				</ul>
		</div>		
	</nav>

  1. 我的左菜单有问题。 唯一的代码:

	.navbar-nav {
		padding-left: 50%;
	}

正在工作。我认为这是不对的,但是我不知道该怎么办?

当你帮助我的时候,我会很高兴。我很新鲜。

0 个答案:

没有答案