CODEWITHSUNDEEP
htmlcss
keronconk
keronconk

Reputation: 359

UI/UX with two div each contain menu

I want to achieve some UI/UX like this

so there is a logo, also 2 menu, 1 for language change, 1 for change menu

enter image description here

my approach is two div

first div contain image and language menu ul

second div contain menu ul

but, image in first div is covered by second div

did my approach wrong?

Here is what I've done

HTML & CSS

header {
  position: fixed;
}

#logo {
  position: fixed;
  float: left;
}

#nav-language {
  align: right;
  width: 100%;
  height: 66px;
}

#nav-menu {
  background-color: #ccb96b;
  width: 100%;
  height: 66px;
  top: 67px;
  position: fixed;
}

#nav-menu ul {
  left: 500px;
  z-index: 5;
}

ul {
  list-style-type: none;
}

li {
  display: inline;
  padding: 15px;
}

#nav-language a {
  font-size: 1.6em;
  text-transform: uppercase;
  font-weight: bold;
  font-family: century gothic;
  text-decoration: none;
  color: white;
}

#nav-menu a {
  font-size: 1.6em;
  text-transform: uppercase;
  font-weight: bold;
  font-family: century gothic;
  text-decoration: none;
  color: #430615;
}

#nav-menu a:hover {
  opacity: 0.36;
}
<header>
  <div id='nav-language'>
    <img id="logo" src="<?php echo base_url(); ?>assets/images/logo.png" />
    <ul>
      <li class='navigation-Blog'><a href='#'>en</a></li>
      <li class='navigation-Crew'><a href='#'>fr</a></li>
      <li class='navigation-Promos'><a href='#'>it</a></li>
    </ul>
  </div>
  <div id='nav-menu'>
    <ul>
      <li class='navigation-Blog'><a href='#'>home</a></li>
      <li class='navigation-Crew'><a href='#'>About Us</a></li>
      <li class='navigation-Promos'><a href='#'>contact us</a></li>
    </ul>
  </div>
</header>

any help appreciated, maybe my approach could be wrong, welcome for advice

Upvotes: 0

Views: 97

Answers (1)

philr
philr

Reputation: 1940

I was able to achieve what you're looking for by changing the #nav-language to position: relative; and changing the css on the #logo div's z-index and top & bottom attributes. Here's a jsfiddle

EDIT: Note that you'll have to play with the top and bottom values depending on your image size, i've used a random image as an example

EDIT2: i noticed that you have align: right; on your #nav-language div, but align doesn't exist in css, you'll want to set the header width to 100% and put float: right; on the language ul. i've updated my jsfiddle with the correct css

https://jsfiddle.net/n42dyhza/2/

Upvotes: 2

Related Questions