Hi Satimis
There’s quite a lot of text in those menu items! Personally I would try to reduce the number of words in your titles at the top level. Having said that, I had a play with it and if you reduce the font size and padding and restrict the with of links they do wrap round.
You can add the following to your custom css or preferably child theme
.nav-menu li a {
padding: 8px 5px;
font-size: 14px;
width: 80px;
}
you might need to play with the padding numbers and width but it looks OK. The better solution would be to reduce the number of top level menu items and the size of them.
Hope this helps
Regards
Martin
Hi Martin,
Thanks for your advice. I’ll reduce the number of the menu items. This is ONLY a test.
child theme
.nav-menu li a {
padding: 6px 8px;
font-size: 14px;
width: 150px;
}
It looks quite good.
I have following questions;
1) Is it possible moving the first line of all items to top? Now some of them on top and others to the bottom
2) How to edit the French in another color and italic?
Thanks
Rgds
satimis
Hi Satimis
The main problem with the the menus is that there is too much text. This is pushing the menu onto two rows. The best way of dealing with this is to look at the structure of the menu and reduce the length of the descriptions.
I would suggest something like this:
Sous Vide [instead of welcome]
How to
Equipment
Water Displacement
Water Bath & Sealer
Experiments
1st – text
2nd – text
3rd – Without Equipment
Recipes
Meat
Fish & Shellfish
Vegatables
Blog [Topic of the Month?]
Contact Us
Forum [buletin board]
Ask a Question
The bold headings are the main items the rest are subheadings. This should give you enough room for the French translation to wrap beneath each one if you restrict the width of each and give you the single line of menu items with French below.
I’m looking into what to do about the different colour/italics question and will add some thoughts shortly!
Hope this helps
Regards
Martin
Hi Martin,
Thanks for your advice. I have rearranged the menu.
Sous Vide [instead of welcome]
There is narration on “welcome” page. It’ll broadcast continuously. On “Sous Vide Cooking” page there are video. Unless I find a way to stop the broadcasting on clicking the video.
Blog [Topic of the Month?]
Sorry I don’t follow. Please explain your question.
Is there a way moving the description of each menu to the top of the menu bar instead of leaving a space on its top? TIA
Rgds
satimis
Hi Satimis
That is certainly looking a lot better!
I have a solution for your italic/colour on the French text question.
It’s the simplest I can think of without getting involved in jQuery.
If you put a <br> tag after “Welcome” and then wrap a <span class="fr"> around “Bienvenue” </span> in the menu title or post title you can then add this to your custom css :
`
.nav-menu span.fr {
color: #0000FF;
font-style: italic;
}
`
In the
Blog [Topic of the Month?]
query I was asking whether you might consider calling that section “Blog” rather than “Topic of the Month” – just because its shorter!
I have had a go at getting the menu items to display at the top but the only thing that works is changing the display property to “inline-flex” but as this isnt supported very well by browsers and it messes up the span solution too, I’ll see if there is another solution.
Regards
Martin
Hi Satimis
If you add this to your custom css it should make the menu items move to the top
.nav-menu li {
display: block;
float: left;
margin: 0 10px;
}
Hope that helps, give me a shout if you need any more help
Regards
Martin
Hi Martin,
.nav-menu li {
display: block;
float: left;
margin: 0 10px;
}
It works. Thanks
.nav-menu span.fr {
color: #0000FF;
font-style: italic;
}
post tile
Welcome<br> - <span class="fr">Bienvenue</span>
It can’t work. It only affects the tile on the front page.
Also tried deleting “” on “fr” without result.
satimis
I was trying to keep it as specific as possible so that it only affected the menu items. If you want it to work anywhere that you use the span class “fr” then all you need to do is remove the .nav-menu part of the rule declaration so you just have :
span.fr {
color: #0000FF;
font-style: italic;
}
That means that you will get the same italic/color combination everywhere you use that span.
I Hope that helps!
Martin
Hi Martin,
I was trying to keep it as specific as possible so that it only affected the menu items
Yes. That is what I expect. But there is no change on the menu item. Only the title on that page is affected.
Rgds
satimis
Are you entering menu titles on the menu setup in Apearances or are you letting the post title determing the menu title? Looking at the html at the moment the menu title doesnt have the span tag around the bienvenue.
If you are specifying menu titles then you have to put the tag in there as well.
Sorry satimis, I have just checked this on my server here and realised that the tags are being stripped out of the menu titles. I’ll have to have another think about how to do this, we may well have to use some jQuery to pick up a character like “|” in the title and insert the span tag that way. I’ll have dig around and get back to you.
Ah, I see.
Now it works. I’ll do the rest menu later.
Thanks
Rgds
satimis
Hi Martin,
I got my problem sorted out.
Only edit the navigation menu on Appearance.
Also add:
.entry-title {
text-align: center
}
to css to center the text on the page title.
Lot of thanks for your help!
My next topic will be 3D photo rotating. It is quite interesting. I tried it before but couldn’t make it work. Hope to see you in next topic.
Rgds
satimis
