Combine Menu and Header

  • Right now the menu on my site is underneath the header. I am trying to combine the menu and header to be on the same line with my logo on the left and the menu on the right of it.

    I’ve tried looking at other threads and altering my code but nothing has worked…
    My site is https://www.addieeshelman.com

    Here is what I think I should be editing? HELP!

    /* .nav */
    .mobile-nav {clear: both; background: #fff; width: 100%; margin: 0 auto;}
    .nav {position: ‘in_header’; background: #fce2d3; width: 95%; padding: 10px 0; clear: both; text-align: right; text-transform: uppercase; line-height: 1em; font: 400 .9em ‘Montserrat’, Arial, Verdana, Sans-serif;}
    .nav-inner {display: none; border-top: 2px solid #fff; border-bottom: 2px solid #fff;}
    .nav ul {display: none; list-style: none;}
    .nav a {display: inline-block; padding: 15px; color: #646265;}
    .nav a:hover {color: #646265;}
    .nav a span {display: inline; font-size: .8em; font-style: italic;}

    .nav .current-menu-item > a,
    .nav .current-menu-ancestor > a,
    .nav .current_page_item > a,
    .nav .current_page_ancestor > a {background: #d5ebde;}

    .nav li {display: inline; position: ‘in_header’; z-index: 100;}
    .nav li:hover {background: #d5ebde;}
    .nav li:hover > ul {opacity: 1; -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”; filter: alpha(opacity=100); zoom: 1; visibility: visible;}

    .nav ul li.has-sub > a {background: url(‘images/menu_down.gif’) no-repeat right center;}
    .nav ul ul li.has-sub > a {background: url(‘images/menu_right.gif’) no-repeat right center;}

    .nav ul ul a {display: inline-block; padding: 15px; position: ‘in_header’;}
    .nav ul ul {opacity: 0; -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”; filter: alpha(opacity=0); zoom: 1; visibility: hidden; position: ‘in_header’; width: 240px; background: #fce2d3; z-index: 200; text-align: left;}
    .nav ul ul li {display: inline-block; float: none;}

    .nav ul ul ul {position: relative; left: 240px; top: 0;}

Viewing 1 replies (of 1 total)

  • your logo/header image width itself is 1140, first you have to trim/corp this to smaller one so that it can fit. I am assuming you will set the width to 200px (change if you want)

    @media(min-width: 681px){
.header:before,
.header:after {
  content: " ";
  display: table;
}
.header:after {
  clear: both;
}
.header {
  background: #fceee5;
  padding: 0;
}
.header>a{
  float: left;
}
.header>a img{
  max-width: 200px;
}
.header .nav{
  float: left;
  clear: none;
  width: auto;
  text-align: left;
}
}

    And remove the Home nav button [because logo is already pointing to your home url].

Viewing 1 replies (of 1 total)
  • The topic ‘Combine Menu and Header’ is closed to new replies.

Tags