Drew-1
January 19, 2018, 2:16am
1
I’m a new-born babe when it comes to this stuff, so don’t be afraid to tell me I’m dumb xD
My issue is that whenever I attempt to wrap a button and a header in one line on the page, it wont stay on that line. And when I found out how to do so, it messed up my background color. I keep trying to figure out the cause but I can’t wrap my brain around it.
Here’s the pen:
Drew-1
January 19, 2018, 2:22am
2
Nevermind, just fixed it. I was dumb and didn’t wrap #menuButtons inside #menuHeader . Sorry for the clog ;p
You could also do something like:
HTML
<link href="https://fonts.googleapis.com/css?family=Julius+Sans+One|Khand|Lobster+Two" rel="stylesheet">
<div id="menu">
<div class="row" id="menuHeader">
<div class="col-xs-6">
<h1 id="title">Portfolio - <span id="titleDrew">Drew</span></h1>
</div>
<div class="col-xs-6 text-right">
<div id="menuButtons">
<button class="btn btn-default" id="buttonAbout">About</button>
<button class="btn btn-default" id="buttonWorks">Works</button>
<button class="btn btn-default" id="buttonContact">Contact</button>
</div>
</div>
</div>
</div>
<div id="content">
</div>
CSS
#menuHeader {
background-color: #f08400;
-webkit-box-shadow: 0px 15px 0px 0px rgba(186,99,0,1);
-moz-box-shadow: 0px 15px 0px 0px rgba(186,99,0,1);
box-shadow: 0px 15px 0px 0px rgba(186,99,0,1);
margin-top: 0em;
height: 5em;
background-size: auto 100%;
/* display: inline-block; */
}
#title {
color: white;
text-align: left-center;
text-shadow: 1px 2px 1px black;
font-family: khand, arial;
display: inline;
background-color: #f08400;
}
#titleDrew {
color: silver;
}
1 Like