navigation issues

  • 1
  • Question
  • Updated 4 years ago
  • Answered
  • (Edited)
im using the super flat style template but im having issues with my navigation bar. i really want it to stay in one place preferably below the banner at all times on each page. Now i also want to get rid of the banner (which ive managed to do) yet when i add content to the page, the navigation then moves up as i add in content below it. can you help.
i removed the banner as i didnt want the black box around it, idealy i wanted my logo so it looks like it does in the picture.
Photo of Eddiemetal666

Eddiemetal666

  • 22 Posts
  • 0 Reply Likes
  • confused

Posted 5 years ago

  • 1
Photo of Eddiemetal666

Eddiemetal666

  • 22 Posts
  • 0 Reply Likes
can i just add the banner is removed in the picture, the logo you see i actually on a pre made background. another problem with this is i really want the logo to remain static and move with the mouse, rather than the content moving over it and covering it =(
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Eddie

Super Flat currently doesn't allow to position the navigation menu below your banner area. However, we're busy working on making this possible in future.

The black box around your banner image you mentioned is the background colour of your banner which you can remove in the Style Designer (Style Designer > Colors > Banner Image > Background Color > None)

If you want your background image to scroll with your content, you can just set the attachment option to "scroll". Under "Colors", click on "Background Image", and click on "Attachment", select "scroll".
Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
Would like to move the navbar under the header as well. Any progress on making this available on the super flat style yet? Cheers!
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Saskia

We've made it possible to position your navigation menu for Super Flat in the meantime!

Here are the steps:

Super Flat
  1. Open your website in the Sitebuilder.

  2. In your workview, click on the Style Designer icon (Palette symbol) to open the Style Designer.

  3. At the top of the left-hand side options column, click on the "Basic" button to access a basic option panel of the Style Deisgner.

  4. Under "Navigation Position", click on "Bottom".

And here's a reminder of how to position your navigation with Skyline:
  1. In the Style Designer, scroll down to the "Layout" section".

  2. Click on "Header Alignment".

  3. Choose "Top" to position your navigation below your Logo area.


Please let me know if you have any questions.
Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
OMG! Thank you so much Stefan! I cant believe i didn't figure this out for myself. Guess i am always working the advanced section of the style designer. I did reach the desired effect with some custom CSS but this is sooo much easier! Thanks again, your help is much appreciated
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Saskia, you won't need to change to the Basic View to position your navigation. In the "Advanced" view, you can also access this option under Layout > Navigation Position.
Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
Just sending you this file as discussed in our live chat :)
Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
not finished - i need to remove the home and add a banner - but you know what im talking about with the menu and header bit. THANKS!
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Thanks Saskia, I'll look into this for you.
Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
Sorry Stefan!

Accidentally clicked on a link which made the chat disappear...Just a couple more questions:

1. Any idea how i can adjust the banner height?

2. Is it also possible to have the logo not just covering part of the navbar but going completely over it (vertical) into part of the image below?

3. I'd like for people to land on the home page with is the one above, but then i dont want 'home' to be visible in the navigation bar, is this possible?

Thanks a lot in advance for looking into this for me!

Much appreciation,
Saskia
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Saskia

Thank you for your detailed questions!
  1. You can adjust the banner height in the Style Designer: Scroll down to the Layout section and click on Banner Width.

  2. That would be difficult to achieve. A page of your Yola website consists of different structure elements, such as header area, banner area, logo area, content area, which cannot be set to overlap each other. The only solution would be to add a Javascript code to position your logo image as an absolute element on top of all other elements. This can be done by users with advanced coding knowledge. Also, the drawback would be that a floating logo may interfere with other widgets added to the page and make it difficult for your clients to edit the page themselves. That's why I'd suggest to try and work with the element structure given by Yola. It has some limits, but on the other hand it's easier to work with, and you can still achieve an absolutely customized and amazing web design.

  3. This works with CSS editing on Premium and Free Styles, but not for Skyline or Super Flat. This is because the Style Designer overwrites any CSS edits made for the navigation which would be necessary to undisplay the "Home" link. Are you sure you want to hide the "Home" link? It could make it difficult for your visitors to find their way back to your home page while navigating through your site. I'd personally advise against it.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Saskia

Thank you for following up - let me start with a solution for your first request you shared with me on our Live Chat.

So there is a more comfortable way to achieve the design you posted above, without making elements of your website unavilable because widgets with negative margin values overlap them. You will first need to create a banner image that contains the colour bars, i.e. a black line, the white bar, two black lines enclosing a grey bar for the navigation, and the logo put on top as a layer image. Once done, you'll need to add a short code to your Site CSS in order to make the navigation menu move up onto your banner image. It'll require to adjust the margin value included with this code until you've achieved the desired design result.

I'm not sure how familiar you are with using Image Editing Tools or graphic software to create your own pictures and graphics. While I can't give you a full introduction into image editing/creating, I'll post you some steps to do on Pixlr.com, and for the rest, you'll need to play around a little on your own to go on learning how to use this tool for your needs. They also offer video tutorials etc.

  1. So first you'll create the first banner image layer which is so to speak the background of your banner image.

  2. Open the Pixlr Editor website.

  3. Click on the "Create new image" option.

  4. Name your first banner image layer.

  5. Fill in the width and height values. If you create a new site using Skyline, the banner width is 1020px. For the height you will need to try, I'd suggest 200-250px. The height will adapt in Sitebuilder automatically.

  6. Click on "OK". Next, you will see a white box with the dimensions you specified. On the left-hand side you can see a tool box with tools to edit your picture, and on the right hand side you will find a box named "Navigator". It shows you the pixel coordinates of your image.

  7. Click on the "Marquee" tool in the tool box.

  8. Move your mouse to the top left-hand corner of your image until the Navigator shows you 0 pixels for both the X and the Y value.

  9. Click on your mouse, hold the key, and drag the marquee tool across the width of your image in order to highlight the area which is supposed to become the top black line of your image.

  10. Once the right area is highlighted with the marquee tool, make sure you see a black colour in the biggest square of the little palette grid at the bottom of the tool box and click on the "Paint Bucket Tool" further up.

  11. Fill the highlighted area with your black colour by clicking into this area with the Paint Bucket Tool.

  12. Now proceed with your other colour bars. To change the colour, click on the big colour square of the colour palette grid.

  13. Once you have created your colour bars, add your logo image as a layer image on top. In the menu above, click on Layer > Open image as layer.

  14. Select your logo image from your computer. Pixlr will automatically add it to the middle of your first banner image layer.

  15. Click on the "Move Tool" in the tool box. When you click on your logo and hold, you'll be able to move it around on your first banner layer. Position it as you want it.

  16. Once you're happy with the result, save this image to your computer (File > Save).

  17. Back in Yola Sitebuilder, make sure to choose the Skyline Style from the "Recommended" categroy.

  18. Open the Style Designer.

  19. Scroll down to the "Layout" section.

  20. Set the Header Alignment to "Top". Your navigation should now move below the header/logo area.

  21. Click on "Header Padding" and select "none" for all values.

  22. Further down, uncheck (yes, that's correct) "Display Banner".

  23. Scroll up to the "Colors" section and add your banner image under "Logo".

  24. Final step: Adding CSS code for moving the navigation menu up on top of your banner image. In Sitebuilder, click on Site > Content > Site CSS.

  25. Uncheck the checkbox in the bottom-left corner. The left overrides box becomes available.

  26. Copy this code fully and paste it into the overrides box:
    #yola_nav_block {
    
    margin-top: -40px;
    }

  27. Click on the "Preview" tab on the right-hand side to preview the change.

  28. Click on "OK" and preview the result in Sitebuilder. To adjust your navigation menu to the right height to hit the grey colour bar, go back to the Site CSS Editor and edit the value after "margin-top". Make sure to keep a negative value. Done!
Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
Thank you so much for this step by step guide Stefan. Im sorry you went through all this trouble after me mentioning to you that i do have inkscape and know how to work with it. Remember i told you i already quickly did the header and uploaded it while we were talking? Anyway, doesn't matter,i tried to figure out the codes through firebug before but this is the snippet i was missing and it all works perfectly now. Yay!

Are you sure there is no possibility of creating a landing page which will only be visible when people arrive at the site? I am sure this is what i want as i dont need people to be able to navigate back to the "home" page (since it doesnt have any informational content). I would really like to stick to the skyline template. Because i'd like to be able to have the many editorial options. O YAY!!! Never mind! I just thought of something: cant i just cross the home box in the "edit menu" making it invisible!? Simple solution :)

Just one last thing (for now anyway :P). Did you get to look into how i can have different images (in this case logo img) for different pages? I just want to have the landing page looking slightly different then the others...

Thanks!
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Saskia

Yes, there is a way to make your home page a landing page. It depends on how you want it to look and what its purpose is.

You can definitely go to the Page Manager (Page > Navigation) and take the Home page out of the standard navigation menu. This will make the link to the Home page invisible in the navigation. However, all other navigation links to your other pages will be visible on your home page. If you're fine with that, this is your solution.

If you'd like to undisplay the other pages as well, you would need to take each page out of your standard navigation and to create your own custom navigation.

In general, I'd advise against landing pages as the home page as it is outdated and can irritate users to have to click on another link to see the actual website. Also, the home page is important for search engines. If you don't have a lot of content on your home page, you will need to add very good keywords to your metadata area for search engines to not to punish your site for a lack of information. However, experts on SEO say that content is more important than keywords. You may want to rethink this option.

You can have a different banner and background image for different pages. When you add one of them via the Style Designer and save, you'll be asked to confirm if your image file should be applied to all pages or not. If you click "No", it will just be the currently selected page.
Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
Thanks for helping me on these questions Stefan. I will probably still have to go with the landing page as this is something my client wants. But i will be sure to point out the reasons why it is perhaps better to reconsider it. As i thought just unclicking 'home' to be visible would be the solution to the navigation option and i cant believe i missed the option for applying to all pages or not. Must've selected that somewhere in the beginning. Anyway, cheers!