I am in the process of making my website design responsive, starting with the SVG logo. Following the excellent suggestions by Amelia Bellamy-Royds, I have included attributes for
viewBox,preserveAspectRatio, x, y, widthheight.
I'm facing various challenges, but two are particularly puzzling:
1) As I resize my browser window, the navigation links disappear (even though the logo size remains constant), and beyond a certain breakpoint, the SVG grows significantly in size.
https://i.sstatic.net/8HhML.gif
Why does the svg scale so dramatically?
2) The current viewBox is set to viewBox="0 0 349 54". When I decrease these numbers to, say, 0 0 175 25, the image becomes larger. Conversely, increasing them, like changing it to 0 0 3500 540, makes the image smaller. However, there are instances when reducing the numbers results in a smaller size. How does altering these numbers arbitrarily affect the size of the svg?
Below is the relevant code for the navbar:
<nav class="navbar navbar-fixed-top navbar-dark bg-primary navbar-toggleable-md hidden-print"
style="height:4em">
<div class="row">
<div class="col-md-2">
<a class="navbar-brand"
href="/">
<svg viewBox="0 0 349 54"
preserveAspectRatio="xMidYMid meet"
x="0"
y="0"
width="100%"
height="100%">
<!-- SVG data goes here -->
</svg>
</a>
</div>
<div class="col-md-10">
<button class="navbar-toggler navbar-inverse hidden-md-up navbar-toggler-left"
type="button"
data-toggle="collapse"
data-target="#collapsingNavbar">
☰
</button>
<div class="collapse navbar-toggleable-md bg-primary"
id="collapsingNavbar">
<ul class="nav navbar-nav pull-right ml-auto">
<li class="nav-item">
<a class="nav-link"
href="/home">
<i class="fa fa-home"
aria-hidden="true"></i>
Home
</a>
</li>
[ ... ]
<li class="nav-item">
<a class="nav-link"
href="/logout">
<i class="fa fa-sign-out"
aria-hidden="true"></i>
logout
</a>
</li>
</ul>
</div> <!-- end collapsing navbar -->
</div> <!-- end col 10 -->
</div> <!-- end row -->
</nav>
Thank you for your assistance. Below is the pertinent CSS. These are all the selectors I have customized or added from the default bootstrap 4 alpha 6 release:
body {
padding-top:6rem;
}
body, html {
height:100%;
}
/* workaround modal-open padding issue */
body.modal-open {
padding-right:0 !important;
}
#sidebar {
padding-left:0;
}
.bg-primary {
background-color: #001A57;
}
.top-buffer { margin-top:20px; }
.bottom-buffer { margin-bottom:.5rem; display: inline-block; }
/*
* Off Canvas at medium breakpoint
* --------------------------------------------------
*/
@media screen and (max-width: 48em) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -33%;
}
.row-offcanvas-left.active {
left: 33%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 33%;
height: 100%;
}
}
/*
* Off Canvas wider at sm breakpoint
* --------------------------------------------------
*/
@media screen and (max-width: 34em) {
.row-offcanvas-left
.sidebar-offcanvas {
left: -45%;
}
.row-offcanvas-left.active {
left: 45%;
}
.sidebar-offcanvas {
width: 45%;
}
}
/* responsive nav stacked liked 3.x */
@media(max-width:34em) {
.navbar .navbar-brand {
float:none;
display: block;
}
.navbar .navbar-nav>.nav-item {
float: none;
margin-left: .1rem;
}
.navbar .navbar-nav {
float:none !important;
}
}
svg {
font: 10px sans-serif;
}
.navbar-toggler {
-webkit-align-self: inherit;
-ms-flex-item-align: inherit;
align-self: inherit;
padding: 0.25rem 0.75rem;
font-size: 1.25rem;
line-height: 1;
background: transparent;
border: 1px solid transparent;
border-radius: 0.25rem;
position: absolute;
right: 1em;
top: .5em;
color: white;
}