-
Posts
-
Hi,
i’m trying to emulate our PDF version of our menu on to the site. How do I go about formatting the page to look like this?
Click to access holy-cow-sliders1.pdf
The blog I need help with is holycowsliders.comThe food menu page in Bon Vivant has a specific layout, which is designed to look good on all types of devices, including mobile devices like tablets and phones. It looks like this:
http://bonvivantdemo.wordpress.com/menu/
The food menu is automatically displayed on a page with the slug /menu/ at the end. Since you’ve manually created a different page which has the same slug (/menu/), that page is overriding the menu page Bon Vivant that is designed to display.
If you’d like to see the menu Bon Vivant is designed to display, you could temporarily rename http://holycowsliders.com/menu/ to something else, by editing the slug: https://cloudup.com/cB7cq2gFwW8
Once you set up the menu Bon Vivant is designed to display, we can look at any specific tweaks you might like to make, such as font or size.
Hi,
I’m not using the menu template page and decided to create a regular page. I still want the Menu button (which downloads the PDF version). How can I code that in?
Thanks,
Lenny
You can use a custom link to do that – the guide is here:
http://en.support.wordpress.com/menus/#adding-custom-links
I recommend that you warn people the link goes to a PDF – it’s considered good Netiquette to do that. :-) So you might consider something like Menu (PDF) for your menu label.
Hi Kathryn,
Sorry for not being more descriptive. You can see that http://highcottonwineandcheese.com/ has the menu button that comes with the theme – but they have moved it to their front page.
I’d like the same button, but on our ‘Chow Time’ page.
Thanks!
Ah! They’ve just placed a link to the menu in their HTML within the post, it looks like this in their post editor in Text (HTML) view:
<span class="pdf-menu"><a href="http://highcottonwine.files.wordpress.com/2014/05/highcottonwineandcheesemenu.pdf">Download Menu</a></span>And their CSS code for the class pdf-menu looks like this:
.pdf-menu {
background: @hilite;
border-radius: 50%;
display: block;
margin: 0 0 1.5em;
padding: 5px;
position: absolute;
top: -1em;
right: 0;
width: 75px;
height: 75px;
z-index: 1;
}
.home .entry-content .pdf-menu {
position: relative;
float: right;
top: 0;
}
.entry-content .pdf-menu a {
border-bottom: 0;
}
.pdf-menu a {
color: rgb(72, 64, 65);
display: block;
line-height: 1.3;
padding-top: 21px;
text-align: center;
width: 100%;
height: 100%;
}That should get you started! Let me know how it goes.
You’d just need to remove the word
.home(including the dot) in the CSS above, since you wouldn’t be targetting the homepage.
I actually do want it on the home page (new decision). I tried the code in CSS but nothing happened…
I actually do want it on the home page (new decision). I tried the code in CSS but nothing happened…
Did you also add the link itself on your homepage post? The CSS alone won’t do anything, it only works in conjunction with an HTML element that has the class pdf-menu. I don’t see the link in your post here: https://holycowlenny.wordpress.com/wp-admin/post.php?post=61&action=edit
The topic ‘Menu Page’ is closed to new replies.
Theme Support 