header content alignment issue

pull/2238/head
maxgrapps 5 years ago
parent fed9f60477
commit bd94b10341
  1. 35
      apps/block_scout_web/assets/css/components/_navbar.scss
  2. 4
      apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex

@ -22,7 +22,7 @@ $navbar-logo-width: auto !default;
font-size: 14px;
}
.navbar-nav {
flex-grow: 1;
// flex-grow: 1;
.nav-link {
align-items: center;
@ -153,6 +153,18 @@ $navbar-logo-width: auto !default;
@include media-breakpoint-up(xl) {
width: 280px;
}
@media (min-width: 1366px) {
width: 330px;
}
@media (min-width: 1440px) {
width: 380px;
}
@media (min-width: 1580px) {
width: 430px;
}
@media (min-width: 1800px) {
width: 520px;
}
}
.input-group-append {
height: 38px;
@ -198,7 +210,7 @@ $navbar-logo-width: auto !default;
width: 100%;
.awesomplete {
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(lg) {
width: 100%;
}
}
@ -210,6 +222,10 @@ $navbar-logo-width: auto !default;
.navbar-brand {
margin-left: 0;
flex-shrink: 1;
.navbar-logo {
max-width: 100%;
}
}
.navbar-logo {
@ -227,3 +243,18 @@ $navbar-logo-width: auto !default;
.add-border {
border: 1px solid transparentize($white, 0.30);
}
.navbar-collapse {
justify-content: flex-end;
align-items: flex-start;
flex-shrink: 0;
@media (min-width: 992px) {
align-items: center;
}
}
.navbar-container, .navbar-primary {
@include media-breakpoint-up(xl) {
padding-right: 0;
}
}

@ -1,5 +1,5 @@
<nav class="navbar navbar-dark navbar-expand-lg navbar-primary" data-selector="navbar">
<div class="container">
<div class="container-fluid navbar-container">
<%= link to: chain_path(@conn, :show), class: "navbar-brand", "data-test": "header_logo" do %>
<img class="navbar-logo" src="<%= logo() %>" alt="<%= subnetwork_title() %>" />
<% end %>
@ -7,7 +7,7 @@
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link topnav-nav-link dropdown-toggle" href="#" id="navbarBlocksDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="nav-link-icon">

Loading…
Cancel
Save