Steve
|
Hi,
This should be a feature - the ability to add an image or logo on the menu 
Question is, does anyone have an idea of how to place a logo or image on a horizontal menu ?
I'm building a minimalistic site and the logo has to be the first item on the menu - any experience/ideas anyone on this ? Any pointers will be appreciated !
|
| |
Dave B
|
Not sure what you mean but you can use a background image and align it.
|
| |
Steve
|
Hi,
Here are some examples of what I mean, the logo is part of or over the horizontal menu. Artisteer does not allow for any of this. It also does not allow creating content in the header to make your own menu, so what do you do ??
Have a look and you will see what I mean.
http://dragoninteractive.com/
http://mastergrinding.com/
http://www.theoldstate.com/
Does anyone know how to achieve something like this ? Using Artisteer ?
|
| |
Dave B
|
What version of Artisteer are you using. Except for the old statte site it's possible with 4.1. That one would be tough because the menu items are split up on either side of the image.
The responsive part will mess this up too.
|
| |
Steve
|
Hi Dave B,
I'm using the latest version. I realise that the theoldstate.com would be difficult, but what are your ideas on the how to get a logo on the left ?
Would be interesting to know if you have the time.
|
| |
jrgweb
|
@Steve - Are you going to do this in HTML or a CMS?
Do you want menu functions or is this just visual with link to homepage?
I could possibly help later today if Dave B. is busy.
I did something like this back in artisteer 3. Split the menu and put a logo right in the center. A responsive site would need tweaks.
|
| |
jrgweb
|
Hey Steve - just a quick demo of a logo on menu bar.
http://demo.artisteertoday.com/menu_header/demo2/blog.html
|
| |
Steve
|
@jrgweb
Its for an html site ... and thanks a lot mate, really do appreciate it 
|
| |
jrgweb
|
@Steve - There are a few ways to achieve this so I will try and give instructions on the easiest method.
1st, create your template in artisteer as normal making the first menu item as logo.
2nd, enter this in the export options/CSS options in artisteer:
#logo {
margin-left: 15px;
width: 233px;
height: 64px;
float: left;
background-image: url('http://www.artisteer.com/media/p4/design/bgimage.gif');
background-repeat: no-repeat;
}
Now save and export your template.
In each page find the first <li> for the logo menu button.
<li><a href="../logo.html" class="">logo</a></li>
And change to this:
<li>
<span><a href="../index.html" id="logo"></a></span>
</li>
So the entire menu code will look similar to this:
<nav class="art-nav desktop-nav">
<div><p class="art-menu-btn-label">MENU</p></div> <a href="#" class="art-menu-btn"><span></span><span></span><span></span></a><ul class="art-hmenu"><li><span><a href="../index.html" id="logo"></a></span></li><li style="width: 73px;" class="ext-r ext"><div class="ext-m"></div><div class="ext-l" style="width: 50px;"></div><div class="ext-r" style="width: 50px;"></div><a href="../home.html" class="">Home</a><ul class=""><li><a href="../home/new-page.html" class="" style="">Subpage 1</a></li><li><a href="../home/new-page-2.html" class="" style="">Subpage 2</a></li><li><a href="../home/new-page-3.html" class="" style="">Subpage 3</a></li></ul></li><li><a href="../blog.html" class="">Blog</a></li></ul>
</nav>
If this is going to be a responsive site also a few modifications in the responsive.css will be required.
If time permits I'll do another example with the logo in the center of the menu bar.
Here is the link to the demo:
http://demo.artisteertoday.com/stevelogo/
|
| |
Steve
|
@jrgweb
Thanks mate, you are a life saver ! I was thinking along similar lines but my knowledge of css is not so hot .
I really do appreciate this ... and I hope that artisteer make this a feature in the future!
|
| |
Erik
|
Quote jrgweb:
jrg I am interested in the center style logo. Is it possible to make the logo extend beyond the bar though? Stylistically it looks better. Also do you know how to make the nav static at the top of the page?
|
| |
jrgweb
|
@Erik - I have a few demo's with fixed headers, menu's, footers and sidebars.
As for the image, I assume you mean something like this:
examples: pinned header and menu
http://demo.artisteertoday.com/pinned/
pinned sidebar:
http://demo.artisteertoday.com/pinned/left-sidebar/
horizontal nav fixed when scrolling
http://demo.artisteertoday.com/menu_header/blog.html
|
| |
jk
|
@jrgweb
the horizontal nav fixed fixed when scrolling is realy that i'm looking for Artisteer 4
would it be possible to get the Code or the artx file?
that would be really nice
|
| |
jrgweb
|
@jk - http://demo.artisteertoday.com/menu_header/headdemo.artx
I think this was done with artisteer 4.1..0.60046
If you can't open let me know.
|
| |
Ducktape
|
Hi jrgweb,
Just to let you know that the latest version of Artisteer (non 4.2) is version 4.1.0.59861.
I have a more recent version 4.1.0.59953 (had a major bug and support sent me this version) but I cannot open your .artx file (weird negative error alert).
Could you pls resubmit with an older version
Regards,
Ducktape
|
| |
jk
|
@jrgweb
well done, many thanks
|
| |
mightec
|
@jrgweb - Is there nothing that you don't know about Artisteer, they should employ you as a consultant, great stuff.
|
| |
Nick
|
My exact sentiments! Thanks jrgweb.
|
| |
Leonardo
|
Hello,
I put the logo in the menu bar as follows:
Menu> Menu area> Texture> Insert from file texture to texture positions Bottom Left.
The problem in responsive mode that logo appears at the bottom behind the text, I would like as high as the first image.
excuse my english, I hope I explained myself.
The site of which I speak: www.vsmvetrinistica.it
|
| |
jrgweb
|
@Leonardo - I don't agree with the method used for this logo placement.
Looking at the code, you're using 4.2 so why not insert a logo the intended way?
Let's look at your method for just a moment. What you have done is taken a graphic image so that the image will fill the entire menu bar. This is what the texture feature is intended for in artisteer.
Now lets look at an easier method to achieve your look.
In artisteer go to header--->insert controls--->imagelink
This gives you an opportunity to enter a url along with a few other options.
You can move the image around the header area I created a quick example for your viewing. Make sure you check the responsive view.
http://demo.artisteertoday.com/leo/
|
| |
FSDesigner
|
Quote jrgweb:
So what is the modifications/css changes and directions to make this happen??
|
| |
FSDesigner
|
@jrgweb
I understand the instructions you have provided, thank you. I am just having trouble finding the html file for each page. I also cannot figure out where artisteer stores the list for the menu items as you explained below.
<nav class="art-nav desktop-nav">
<div><p class="art-menu-btn-label">MENU</p></div> <a href="#" class="art-menu-btn"><span></span><span></span><span></span></a><ul class="art-hmenu"><li><span><a href="../index.html" id="logo"></a></span></li><li style="width: 73px;" class="ext-r ext"><div class="ext-m"></div><div class="ext-l" style="width: 50px;"></div><div class="ext-r" style="width: 50px;"></div><a href="../home.html" class="">Home</a><ul class=""><li><a href="../home/new-page.html" class="" style="">Subpage 1</a></li><li><a href="../home/new-page-2.html" class="" style="">Subpage 2</a></li><li><a href="../home/new-page-3.html" class="" style="">Subpage 3</a></li></ul></li><li><a href="../blog.html" class="">Blog</a></li></ul>
</nav>
|
| |
jrgweb
|
@FSDesigner - When you export your template your files are located in the folder you saved the template in.
If you know anything about jquery/jscript, you can do the code and not have to manually edit the template.
|
| |
Martin
|
Quote jrgweb:
Hello.
I would like to create template for joomla 2.5 with logo in the middle of navigation.
Please can you help me how to do this in artisteer.
|
| |
Ian Shere
|
Any reason you don't drop this into position Extra1 (or whatever that is in position-xx)? Won't work for a centered logo but should for left or right. At least it will for Joomla - no idea how it works for WP.
|
| |
Scott
|
Quote Levi G:
Just an update to an old topic - building in WordPress, if you would like to add a logo before your menu:
1. Open your header.php file
2. Find <div class="art-nav-inner">
3. Directly after this add <img src="example.png" class="menu-logo">
4. In your style.css file add ".menu-logo { display: inline-block; vertical-align: middle; } (be sure to add any other styling here, I.E. height/width, margin etc)
I was looking for a solution and had to come up with this one myself, so far it works great AND shows up next to the Menu button in responsive which looks nice on the theme I'm building.
Feel free to poke holes if you see any, just posting what worked on my end with limited testing.
@Levi G:
I'm using v 4.1.0.59861 Standard ed
I cannot find <div class="art-nav-inner"> in header.php
|
| |
IwishIknew
|
Levi G - You are an angel...thank you so much :) Easy when you know how, added float left and works like a charm for my needs.
|
| |
Rafael Barreto
|
Quote jrgweb:
It is redirected to: http://ww1.artisteertoday.com/
|
| |