Align logo with menu

Partially solved : I set “Masthead Menu” to “Empty menu” (Vantage layout tab) then I added my WP menu to the page. But I can’t customize it using main-navigation stuff, only .menu {…

Hi,
don’t worry for the delay, it’s ok ! besides, I still need your help ;) I have 3 major questions :

#1 : I want the font I use (Helvetica Neue) to be readable by all the browsers. I copy-pasted its bin-code in my CSS file and uploaded the corresponding files on my server. With IE 8 and Chrome 40.0.2214.111 m, the menu displays with Helvetica, no problem. However, with Firefox 35.0.1 and IE 11 , an alternative font displays (a kind of sans-serif font, maybe Arial). How can I solve this ?

#2 : When the sreen width is too small (or the menu width too large), the menu comes across my logo. How can this phenomenon could be avoided ? For instance, if the screen width is too small, is it possible to stack the logo above the menu ?

#3 : How can I have a responsive menu ? If the screen width is far too small, is there a way to have a dropdown icon which would display the menu ? Is this feature available in the full version of your theme, and is it possible to activate it without changing my current settings ?

Many thanks for your great theme, and for your help :)

Regards

hi, thanks for your reply

#1 : ok I’ll try to improve my font rendering, otherwise I’ll use a google font (as far as I’m concerned, google font usually display better than imported fonts)

#2 #3 : yes ok I saw the demo display for other screens, but my menu is different than yours, because I don’t use the built-in one. The reason why I did so : when I used the built-in menu, I was not able to align properly the menu and the logo. I didn’t want them to be one above the other, but on the same raw. So I’m dealing with a “custom” menu. Let me explain my problem with more accuracy :

– when the screen is big enough, the logo and the menu are aligned
– when the screen is smaller (or the menu is bigger, for instance if another font than helvetica neue is displayed), the menu comes across the logo
– when the screen is small enough, the logo is stacked above the menu

Hence, my problem comes from the behavior of my elements in the intermediate step. At the end of this post I’ll provide some CSS :)

Ok for the Navigation menu, is it available with custom menus ? And is it available on the free version ?

Many thanks again for your help, I really appreciate

Here is the part of the CSS I use for the website’s menu :

 
.menu li {
  text-transform: uppercase;
  font-family: HelveticaNeueLTStd-HvCn, Arial, sans-serif;
  font-size: 16px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 5px;
  padding-left: 5px;
  float: left;
  letter-spacing: 1.5px;
  background: grey;
}

#header-sidebar .widget_nav_menu {
background: #000;
}

#header-sidebar .widget_nav_menu ul.menu > li {
margin-right: 0px;
padding: 0;
}

#header-sidebar .widget_nav_menu ul.menu > li > a {
color: #fff;
padding: 15px;
}

.menu li a:hover {
background: #DF0E7A;
}

.menu li.current_page_item a {
background: #DF0E7A;
}

// Right align the menu
.main-navigation ul {
text-align: right;
}

Hi,
I’ll have a look, thanks !

But I have two 15.6″ machines, one with Chrome and Vista, the other with Chrome and Win 8. Both of the Chrome browsers are the same : 40.0.2214.115 m. On the Vista laptop, the menu displays in Helvetica and is aligned with the logo. On the Win 8 laptop, the menu displays in a kind of Arial and comes across the logo (the menu width is greater). Do you think it is only a size problem ?

Regards

The slider and the text have a nice responsive behavior now, only my logo vs. menu problem remains. How can I make them stack upon each other when the screen width reaches a certain amount ?

regards