How can I customize a navbar with Vantage ?

Can you post a link to your site with the child theme active?

Sure, sorry, https://www.newstart-project.com

You’ve got a menu added via widget to your header, and as you’ve noticed, you’ve got no menu in the “normal” place. Can you check to make sure that you’ve got the menu correctly assigned in Dashboard > Menus > Manage Locations? WordPress considers the child theme to be a different theme, so you may need to reassign your navigation menus and sidebar widgets.

Thanks for your reply,

I checked and it appears that I have my menu as a header widget, and I also have it in manage locations as a primary menu. What should I do then ?

Can you check your theme options at Dashboard > Appearance > Theme Settings > Layout? What do you have for “Masthead Layout” and “Masthead Menu”?

Sure,

masthead layout : default masthead,
masthead menu : empty menu

The reason why I started this topic is that wanted to have my menu and my logo lined up, more or less as you can see now on the website. It means a right-aligned menu, with a space on the left to put the logo. So I disabled “logo in menu” and I started to use the default menu…

Try this in your child theme’s stylesheet:

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

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

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

That’ll give you a black background on your widget menu. It looks a bit awkward, just because it doesn’t really jive well with the theme’s original design.

Thanks a lot for your help,
I tried it but everything was white but the item on which the focus was.

Then I tried :

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

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

#header-sidebar .widget_nav_menu ul.menu > li > a {
color: #000000;
}

but I got almost the same thing as “usual”. The first instruction seems to do nothing, the last changes the color of the menu’s text.

I changed again a bit the CSS you provided, and if I set the margin to 0 px, I almost have a nice result. The only remaining problem is that both the hover and the current page settings don’t match with the background shape, as you can see on the website.

here is a fragment of the CSS I used :

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

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

I wanted to have a (black or whatever) background behind my menu in order to get rid of the “spaces” due to the paddings (up-down, left-right) when I have a mouse.over, exactly as the original design does.

I thought it came from a missing or a misplaced nav-bar or main-navigation, because when I was using Vantage’s menu, I was able to write something like :

.main-navigation ul li:hover > a {
  background: #DF0E7A;
  color: #FFFFFF;
}

Regards ??

Since you’re not using Vantage’s menu, you won’t be able to use those selectors. Those are specific to Vantage’s menu. Instead, we’re using selectors that target the menu in your header’s sidebar: #header-sidebar. I think this’ll be close to what you’re looking for:

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

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

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

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

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

Yes, it is closer to what I want, thanks a lot !

I just modified this :

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

in order to remove the blank spaces between my items.

I also modified this :

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

and my menu is now bigger. So, now, it’s exactly what I wanted !
Thank you very much !!!

I have two more questions, still about the menu customization :

– I use a font (helvetica neue) for the menu (the font is the same as the logo). I used a package-creator then I uploaded it on my server. I’ve registered it in my css. Everything is doing fine with Chrome, but with Firefox the font displayed is not Helvetica, but a replacement font. On the other hand, my common text (a google font)displays properly on both browsers. Is it normal ?

– In order to have a better responsive menu, I’d like it to be displayed on small screens with a scrolldown icon (I mean the one with 3 horizontal bars). How can I do this ?

Anyway, many thanks again ??

regards

About question #2 : I’d like to do so because if the screen is too small, the menu partially hides the logo

For your font issue, what versions of Firefox and Chrome are you using and what OS are you using? On my Mac (running Yosemite) and using Safari, Firefox, and Chrome, I didn’t see your font appear until I fixed some syntax errors in your base64 encoding. See this paste: https://pastebin.com/SPs2cAZ4. I had to add backslashes before the line breaks and put the entire base64 encoding in quotes before it would work for me.

In order to have a better responsive menu, I’d like it to be displayed on small screens with a scrolldown icon (I mean the one with 3 horizontal bars). How can I do this ?

This is possible, but it’s going to require some major surgery. The Premium upgrade to Vantage has a built-in responsive menu option; you might be better off contacting the theme author’s (https://siteorigin.com) directly to see whether the built-in responsive menu option might serve your needs.

I use Firefox 25.0.1 and Chrome 40.0.2214.111 m, on a Vista x32 laptop.

I just pasted the encoding I was given in my existing .css. I don’t remember on what website I took it, I just uoloaded the font and it generated a zipped package. I unzipped it then I moved it to my server, and I added the CSS code to my existing .css.

Ok I’ll contact them to see if it is possible without using a Vantage menu.

Do your fonts appear correctly if you use the code from my Pastebin link? Unfortunately, I don’t have a Vista computer handy to check.

Hi,

sorry I had some troubleshooting when I tried to log-in !

I pasted your code, and the menu displays properly on IE 8.0.6001.19600 and Chrome 40.0.2214.111 m. But with FF 35.0, the default font is displayed, instead of Helvetica Neue.

So the menu comes across the logo…

thanks