Logo in Menu Bar

Xway
1

Hello everyone,
is it possible to insert a logo in the menu at the same height as the tabs, it would be best if the logo would automatically become smaller as soon as you scroll down the page, the menu bar would remain over when scrolling
greetings and thanks Tim

2

Hi Tim,

There are a few ways that you can incorporate a logo within a menu bar: you can add a background image to the menu bar, or to one of the menu items, or you can insert an image within one of the menu items (if you want the image to replace text in a menu item, insert it and then delete the text - this gets around a problem that I’ve just noticed can happen if you delete the text first).

Here’s a way to do this using a background image. This is similar to the way the Apple logo is added on the Apple website (last time I looked).

  1. Insert a menu
  2. Name the first item Home or give it another suitable name (e.g. name of company or organisation)
  3. Add the logo as a background image (set horizontal and vertical repeat to none, centre it horizontally and vertically, and set an appropriate size, such as 20px)
  4. Select the text in the Home item and give it a transparent colour (with zero opacity), so it doesn’t obscure the logo.
  5. Leave the Keep Home in Menu Bar checkbox selected

Alternatively, if you want to add the logo inline before some text:

  1. Insert the logo image in the Home item, before the Home text
  2. Give it an appropriate size (e.g. 20px)
  3. Use the Vertical Align field in the Margins and Alignment section of the Box Inspector to align the image with its text (try entering -5px as a starting point)
  4. Give the image a right margin (e.g. 6px) to space it from the text

The tricky thing with adding an image inline is that once you have got the image vertically aligned with text in its own item, you may find that the text is no longer aligned with text in other items. You can fix this by adding the following CSS rule in the CSS Markup section of the Page Inspector (do this on the master page which contains the menu):

.xw-gn-menuitems { align-items:baseline }

(We might output this automatically in future versions of Xway)

Set the menu to have Fixed position if you want it to remain fixed to the top of the screen when the page is scrolled (see the Xway Menu Tutorial for more information on using Fixed or Sticky position with menus).

As for changing the size of the logo when the page is scrolled, I think you might have to use JavaScript to do that.

3

There are some new CSS viewport and scroll interactions possible, but not fully embraced by all browsers. This is an area that is seeing a lot of development, and the number of things you truly cannot do without JS is shrinking!

Walter

2 Likes