ヘッダーとsubnavは、混乱している

Question

こんにちはフレンドリーなウェブの専門家の支援を必要とする、

私は、コードのウェブサイトに学んで半年午前による大きなプロジェクトを持っていますが、& subnavヘッダへの変更は、物事のすべてがグラグラとドン作りましたまったく見ない。ロゴは、ナビゲーションメニューの上にドロップシャドウと半径のコーナーがあるボックスに置かれ、サブメニューがアクティブになると、サブナビゲーションは別の色でポップダウンされます。現在、ナビゲーションの上部と下部の余白の間隔は右にも表示されません。

私は新人ですので、アドバイスやコーディングの助けがあれば幸いです！

See Header example screenshot, what it should look like vs what it is appearing like.

HTML

<div id="headerWrap" class="hidden-xs"> 
 

 

 
</div> 
 

 
<div class="headerWrap hidden-xs"> 
 
    <div class="headerWrapInner"> 
 
    <div class="container container-smooth"> 
 
     <div class="row"> 
 
     <div class="col-sm-3"> 
 
      <div id="headerLogo"> 
 
      <a href="img"> 
 
       <img src="img" style="width:220px;height:auto;"> 
 
      </a> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-9"> 
 
      <ul> 
 

 

 
      <nav role="navigation"> 
 
       <div class="headerWrap-mainNavigation"> 
 
       <ul class="nav navbar-nav"> 
 
        <li id="menu-item-259" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-226 current_page_item active menu-item-259 active"><a href="visit">Visit</a></li> 
 
        <li id="menu-item-1040" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1040"><a href="memberships">Memberships</a></li> 
 
        <li id="menu-item-261" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-261"><a href="exhibits">Exhibits</a></li> 
 
        <li id="menu-item-1134" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1134"><a href="parties-events">Parties/Events</a></li> 
 
        <li id="menu-item-264" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-264"><a href="preschool">Preschool</a></li> 
 
        <li id="menu-item-1157" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1157"><a href="contact-us">Contact Us</a></li> 
 
       </ul> 
 
       <div class="headerWrap-subnav"> 
 
        <div class="container container-smooth"> 
 
        <div class="row"> 
 
         <div class="col-sm-12"> 
 
         <div id="informationSubmenu" style="padding-left:0px;"> 
 
          <ul> 
 
          <li id="menu-item-427" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-427"><a href="visit/museum-store/">Museum Store</a></li> 
 
          <li id="menu-item-428" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-428"><a href="visit/faqs/">FAQs</a></li> 
 
          <li id="menu-item-1113" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1113"><a href="category/blog/">Blog</a></li> 
 
          <li id="menu-item-1109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1109"><a href="visit/our-story/">Our Story</a></li> 
 
          </ul> 
 
         </div> 
 
         </div> 
 
        </div> 
 

 
        </div>

CSS

@media (min-width: 768px) { 
 
.lead { font-size: 24px; } 
 
} 
 
small, 
 
.small { font-size: 75%; } 
 
mark, 
 
.mark { background-color: #fcf8e3; padding: .2em; } 
 
.text-left { text-align: left; } 
 
.text-right { text-align: right; } 
 
.text-left { text-align: left; } 
 
.text-justify { text-align: justify; } 
 
.text-nowrap { white-space: nowrap; } 
 
.text-lowercase { text-transform: lowercase; } 
 
.text-uppercase, 
 
.initialism { text-transform: uppercase; } 
 
.text-capitalize { text-transform: capitalize; } 
 
.text-muted { color: #777777; } 
 
.text-primary { color: #337ab7; } 
 
a.text-primary:hover, 
 
a.text-primary:focus { color: #286090; } 
 
.text-success { color: #3c763d; } 
 
a.text-success:hover, 
 
a.text-success:focus { color: #2b542c; } 
 
.text-info { color: #31708f; } 
 
a.text-info:hover, 
 
a.text-info:focus { color: #245269; } 
 
.text-warning { color: #8a6d3b; } 
 
a.text-warning:hover, 
 
a.text-warning:focus { color: #66512c; } 
 
.text-danger { color: #a94442; } 
 
a.text-danger:hover, 
 
a.text-danger:focus { color: #843534; } 
 
.bg-primary { color: #fff; } 
 
.bg-primary { background-color: #337ab7; } 
 
a.bg-primary:hover, 
 
a.bg-primary:focus { background-color: #286090; } 
 
.bg-success { background-color: #dff0d8; } 
 
a.bg-success:hover, 
 
a.bg-success:focus { background-color: #c1e2b3; } 
 
.bg-info { background-color: #d9edf7; } 
 
a.bg-info:hover, 
 
a.bg-info:focus { background-color: #afd9ee; } 
 
.bg-warning { background-color: #fcf8e3; } 
 
a.bg-warning:hover, 
 
a.bg-warning:focus { background-color: #f7ecb5; } 
 
.bg-danger { background-color: #f2dede; } 
 
a.bg-danger:hover, 
 
a.bg-danger:focus { background-color: #e4b9b9; } 
 
.page-header { padding-bottom: 10px; margin: 44px 0 22px; border-bottom: 1px solid #eeeeee; } 
 
ul, 
 
ol { margin-top: 0; margin-bottom: 11px; } 
 
ul ul, 
 
ul ol, 
 
ol ul, 
 
ol ol { margin-bottom: 0; } 
 
.list-unstyled { padding-left: 0; list-style: none; } 
 
.list-inline { padding-left: 0; list-style: none; margin-left: -5px; } 
 
.list-inline > li { display: inline-block; padding-left: 5px; padding-right: 5px; } 
 
dl { margin-top: 0; margin-bottom: 22px; } 
 
dt, 
 
dd { line-height: 1.42857; } 
 
dt { font-weight: bold; } 
 
dd { margin-left: 0; } 
 
.dl-horizontal dd:before, 
 
.dl-horizontal dd:after { content: " "; display: table; } 
 
.dl-horizontal dd:after { clear: both; } 
 

 
@media (min-width: 768px) { 
 
.dl-horizontal dt { float: left; width: 160px; clear: left; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
 
.dl-horizontal dd { margin-left: 180px; } 
 
} 
 
abbr[title], 
 
abbr[data-original-title] { cursor: help; border-bottom: 1px dotted #777777; } 
 
.initialism { font-size: 90%; } 
 
blockquote { padding: 11px 22px; margin: 0 0 22px; font-size: 20px; border-left: 5px solid #eeeeee; } 
 
blockquote p:last-child, 
 
blockquote ul:last-child, 
 
blockquote ol:last-child { margin-bottom: 0; } 
 
blockquote footer, 
 
blockquote small, 
 
blockquote .small { display: block; font-size: 80%; line-height: 1.42857; color: #777777; } 
 
blockquote footer:before, 
 
blockquote small:before, 
 
blockquote .small:before { content: '\2014 \00A0'; } 
 
.blockquote-reverse, 
 
blockquote.pull-right { padding-right: 15px; padding-left: 0; border-right: 5px solid #eeeeee; border-left: 0; text-align: right; } 
 
.blockquote-reverse footer:before, 
 
.blockquote-reverse small:before, 
 
.blockquote-reverse .small:before, 
 
blockquote.pull-right footer:before, 
 
blockquote.pull-right small:before, 
 
blockquote.pull-right .small:before { content: ''; } 
 
.blockquote-reverse footer:after, 
 
.blockquote-reverse small:after, 
 
.blockquote-reverse .small:after, 
 
blockquote.pull-right footer:after, 
 
blockquote.pull-right small:after, 
 
blockquote.pull-right .small:after { content: '\00A0 \2014'; } 
 
address { margin-bottom: 22px; font-style: normal; line-height: 1.42857; } 
 
code, 
 
kbd, 
 
pre, 
 
samp { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; } 
 
code { padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px; } 
 
kbd { padding: 2px 4px; font-size: 90%; color: #fff; background-color: #333; border-radius: 3px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); } 
 
kbd kbd { padding: 0; font-size: 100%; font-weight: bold; box-shadow: none; } 
 
pre { display: block; padding: 10.5px; margin: 0 0 11px; font-size: 15px; line-height: 1.42857; word-break: break-all; word-wrap: break-word; color: #333333; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; } 
 
pre code { padding: 0; font-size: inherit; color: inherit; white-space: pre-wrap; background-color: transparent; border-radius: 0; } 
 
.pre-scrollable { max-height: 340px; overflow-y: scroll; }

Answer 1

画像の背景色を追加し、その位置に配置し、下端の境界線の半径を追加するだけです。

私はこのJSfiddleで、次のすべてを行っている、これはあなたが何をする必要があるかのアイデアを与えるのを助ける必要があります。もちろん

あなたがあなた自身の色やロゴに置き換えます。

https://jsfiddle.net/fbbq58t5/

.image { 
    background-color: #fff; 
    width: 325px; 
    height: 240px; 
    display: block; 
    margin: 0 auto; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px; 
    } 

それが助け場合、最大投票してください！