Can you change navigation menu location?

  • 1
  • Question
  • Updated 10 years ago
  • Answered
I love everything about my Yola template except where my navigation menu is located. I'd prefer to have the navigation on the top or left-hand side of the screen (mine is on the right). Is there any way to change this? (my website is www.babyjeb.com if you'd like to see)
Photo of jordan

jordan

  • 1 Post
  • 0 Reply Likes
  • searching for help!

Posted 11 years ago

  • 1
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hi Jordan

You can change the location of the menu but you will have to do some work! =)

First of all.. you'll need to drag everything out of your menu so that it's hidden. Go to "edit menu" and then drag everything from "in the menu" to "out of the menu".

You will need to create some buttons. One site which does this is www.cooltext.com. (There are many other button generators you can find online.)

For the sake of this tutorial, I'll stick with www.cooltext.com Once you've created your buttons, you will need to download them and then you will need to upload them into your file manager. Be sure to copy the code cooltext provides to you.

Then, drag an HTML widget to where you want your buttons to show up. Paste in the code and be sure to add your image url.

I hope that this gives you some idea of what you can do. If you want an example of how I did mine, feel free to check it out at http://littleus.synthasite.com.

Don't hesitate to ask further questions if needed.
Photo of Ruth

Ruth

  • 2819 Posts
  • 135 Reply Likes
Thanks Littleus!
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hi Harry

You can add a customized menu anywhere on your site. However, in your case, while you can do this, if you hide your current menu, you will be left with a big empty space on the left hand side where the original menu was. You cannot fill this empty space.

However, if you wanted to have both a vertical menu (the one that came with the template) and add a horizontal menu, you can certainly do that if you wish.

If you are wanting to create your own vertical menu, then you will have to select a template that has a horizontal menu and hide it. Then, you can add your customized vertical menu.

I hope that I was able to clarify things for you. Please feel free to ask for further clarification if needed.
Photo of Harry

Harry

  • 82 Posts
  • 0 Reply Likes
Jordan,

Did you mean anywhere? The template I use will not allow it.

paoutdoors.synthasite.com

Harry
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hi Harry

You can add a customized menu anywhere on your site. However, in your case, while you can do this, if you hide your current menu, you will be left with a big empty space on the left hand side where the original menu was. You cannot fill this empty space.

However, if you wanted to have both a vertical menu (the one that came with the template) and add a horizontal menu, you can certainly do that if you wish.

If you are wanting to create your own vertical menu, then you will have to select a template that has a horizontal menu and hide it. Then, you can add your customized vertical menu.

I hope that I was able to clarify things for you. Please feel free to ask for further clarification if needed.
Photo of Harry

Harry

  • 82 Posts
  • 0 Reply Likes
I must apologize. I noticed my when i was reading this thread again. Sorry and you have been a big help.

Harry
Photo of Harry

Harry

  • 82 Posts
  • 0 Reply Likes
Jordan,

I had a feeling of that. Thanks

Harry
Photo of Harry

Harry

  • 82 Posts
  • 0 Reply Likes
Jordan,

Can you show me what the Html will look like? Do you put the image url in with the code? Is there any special way? I am trying it out in a new site.

Thanks,
Harry
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hi Harry

Here's a screenshot of what the following code would look like:



(please excuse the repetitive buttons, I just wanted to quickly show you what it would look like)

The code:
<a href="http://yolatestsite.yolasite.com&quot; target="_blank"><img src="resources/cooltext425434548.png" onmouseover="this.src='resources/cooltext425434548MouseOver.png';" onmouseout="this.src='resources/cooltext425434548.png';" border="0"></a><br>
<a href="http://yolatestsite.yolasite.com&quot; target="_blank"><img src="resources/cooltext425434548.png" onmouseover="this.src='resources/cooltext425434548MouseOver.png';" onmouseout="this.src='resources/cooltext425434548.png';" border="0"></a><br>
<a href="http://yolatestsite.yolasite.com&quot; target="_blank"><img src="resources/cooltext425434548.png" onmouseover="this.src='resources/cooltext425434548MouseOver.png';" onmouseout="this.src='resources/cooltext425434548.png';" border="0"></a><br>
<a href="http://yolatestsite.yolasite.com&quot; target="_blank"><img src="resources/cooltext425434548.png" onmouseover="this.src='resources/cooltext425434548MouseOver.png';" onmouseout="this.src='resources/cooltext425434548.png';" border="0"></a><br>
<a href="http://yolatestsite.yolasite.com&quot; target="_blank"><img src="resources/cooltext425434548.png" onmouseover="this.src='resources/cooltext425434548MouseOver.png';" onmouseout="this.src='resources/cooltext425434548.png';" border="0"></a>

You would replace the image path with your own. If you want them horizontal, then just take away the br tags.

p.s. This is Littleus that has been conversing with you... not Jordan =)
Photo of Harry

Harry

  • 82 Posts
  • 0 Reply Likes
I must apologize. I noticed my when i was reading this thread again. Sorry and you have been a big help.

Harry
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Tee hee.. no problem Harry! Just didn't want to keep up this confusion of who is talking to whom! =)
Photo of Harry

Harry

  • 82 Posts
  • 0 Reply Likes
littleus,

i am having problems getting this to work; When i go over the buttons , they
dissappear. and the third button doesn't show. its getting late and getting frustrated. here is my test site. http://explorepa.yolasite.com/
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hi Harry,

I took a look at what's going on. I discovered what is wrong:

Here's your code:
<img
src="resources/Nav_Buttons/Huntingcooltext426650775MouseOver.png"
onmouseover="this.src='cooltext426651432MouseOver.png';"
onmouseout="this.src='cooltext426651432.png';" border="0"></a>

The first img src should actually be this img: cooltext426651432.png

Also, you're missing the image path for your 2nd and third images. And the first image path doesn't look right either for your second menu button. I think it may be missing a backslash between the word Hunting and cooltextblahblah. It should generally look like this:

<img
src="resources/Nav_Buttons/cooltext426650775.png"
onmouseover="this.src='resources/Nav_Buttons/cooltext426651432MouseOver.png';"
onmouseout="this.src='resources/Nav_Buttons/cooltext426651432.png';" border="0>

Try making those corrections and hopefully it will work for you. Please let me know if you continue to have problems.
Photo of Harry

Harry

  • 82 Posts
  • 0 Reply Likes
littleus,
Ok, call me stupid. But my excuse was, being too late at night and a few to many "Mike's lemonades" That my story and I'm sticking to it!!! Here was my problem. I did not download both buttons.That is why they disappear. And I was trying to use the one download for both buttons. Silly me.

Thanks again
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
lol.. glad it was easily resolved! =)
Photo of Harry

Harry

  • 82 Posts
  • 0 Reply Likes
littleus,
Can you look at my site and see why my buttons do not line up. I am getting an error "Invalid component id 'I22'. Cannot find component HTML" And look where the "Vote" and "About Me" buttons. Is there a way to center them with the text? Or do I have to reformat the paragraph?
Thanks for your help.
Harry
http://explorepa.yolasite.com/
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hi Harry

Let me just quickly comment on the "Vote" and "About Me" buttons... the only option is to make your buttons smaller! Then, they'll look more lined up with your text.

Let me get back to you about the buttons not lining up.
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
I took a look at why the buttons may not be lining up.. the only conclusion is that the images are too big. I know.. they seem like they fit.. but remember they have a bit of a padding around them. I would suggest making your images slightly smaller and try again.
Photo of Harry

Harry

  • 82 Posts
  • 0 Reply Likes
littleus.
I get an error "Invalid component id 'I22'. Cannot find component HTML" when i reload the page. How do I fix it? Thanks
harry
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
One more thing... take out all the target="blank" - this to open up your page in a new window or tab. I don't think you want that - if you do, then just leave it in.
Photo of Harry

Harry

  • 82 Posts
  • 0 Reply Likes
'Maybe thats my prob, since there arent any pages to go to except vote and about me. I will add the pages and tell you if that worked
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
The error message is coming up because there's an invalid HTML code on your site somewhere. Did this message come up before you added the buttons? Did you add anything else to your site in addition to the buttons?
Photo of Harry

Harry

  • 82 Posts
  • 0 Reply Likes
if i delete the buttons from the page the message goes away. how do i link the buttons to pages? do i have to add page "...href-.....com/hunting.php", or just ...href"hunting.php" ? i tried both ways and it just goes to index (Home).
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
To make it link, then add the ahref tag in front of your mouse button. It would look like this: <!--<a href="http://explorepa.yolasite.com/hunting... image mouse button code goes here></a>--> Don't include the <!-- and --> (They're simply there to keep the forum from reading the code)
Photo of Harry

Harry

  • 82 Posts
  • 0 Reply Likes
this is my code. It is only one.
<!--<a href="http://explorepa.yolasite.com/hunting...> <img
src="resources/Main_Nav_Buttons/Huntcooltext426735950.png"
onmouseover="this.src='resources/Main_Nav_Buttons/Huntcooltext426735950MouseOver.png';"
onmouseout="this.src='resources/Main_Nav_Buttons/Huntcooltext426735950.png';" border="0></a>-->
but it still takes me to the index page. When I preview page and right click on buttons, it shows <!--<a href="http://explorepa.yolasite.com/index.p...> on all property locations for every page. I updated site and they all still use the index.php.
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
I copied your codes to play with it on my site and I am having the same problems as you. So, I went back to www.cooltext.com and made my own buttons to see if I could replicate the problem... this time I had no problems at all.

I know you've already put a lot of work into this. Can you try making your buttons again from scratch and then adding them again to your site and see if this makes a difference for you as it did for me?
Photo of Harry

Harry

  • 82 Posts
  • 0 Reply Likes
I noticed in my code that there " is missing (ex. <!--border="0></a>-->. Can that be a problem?
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hi Harry.. no.. that border=0 is actually not part of the original code. It was added because when you add an a href link tag to an image, a border shows up around the image. The particular piece of code prevents the border from showing up.

Here's a thought... when you made your buttons, did you by chance copy the HTML code they gave you?? Or did you just use mine? Perhaps that's the error?
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Have you tried making the buttons again?
Photo of Harry

Harry

  • 82 Posts
  • 0 Reply Likes
Just got done. and used the one that was listed. will try them in a few
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Let me know how it goes... crossing my fingers! =)
Photo of Harry

Harry

  • 82 Posts
  • 0 Reply Likes
Done. no more problems. Can you look to see what you think
http://explorepa.yolasite.com
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
I've been sitting here nervously as you were trying to replace your buttons. I'm so relieved to hear that it all worked out! It looks great Harry! Well done!
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Looks great Harry! Littleus, awesome support!

Emmy
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
@Littleus - thanks for helping Harry on this!!!

@ Harry - let us know if this does not work and I will jump in and try and help.
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Here's something I noticed:



Try taking out the first a href tag (the part I highlighted) and see if that makes any difference with your error message.

p.s. click on the image to make it bigger
Photo of Harry

Harry

  • 82 Posts
  • 0 Reply Likes
took it out. no difference. still error. i also took out a button and will add it where Vote and About Me, so i think there is enough room for 4 buttons. but still one button is on another line