logo in global menu bar

Martin Cielens

• June 02, 2020 02:49

I want to make a global menu that has the site logo image on the left and menu links on the right.

I am using Astra theme. Had a look at the youtube clip on creating a custom menu but the options in the theme used there don't appear in Astra. I am using a png logo as below

Is there a guide for this somewhere?

0

• 

  Alex

  • June 03, 2020 12:45
  • Edited

  Hi Marti,

  do you have Brizy PRO? If so, you can just import one of the available header blocks and use it: https://jmp.sh/y43biwP Here you can find more out about the Brizy menu element: https://youtu.be/4u3g9nKYKFo 

  If you want to create this header with the theme elements, then I can't help you. You will need to contact the theme authors.

  Please note that Brizy is a page builder and Astra is a theme and they works almost separately.

   

  0
• 

  Martin Cielens

  • June 02, 2020 23:27

  Thank you for getting back so quickly.
  
  I have Brizy pro and yes, I am aware the the page builder is distinct from the theme. What threw me was a video (I can not find which one now) where you referred to a menu customisation feature in a particular theme, a feature not in Astra.
  
  However, in the meantime I did track down the global headers and footers YouTube session which answered my question - mostly.
  
  What I couldn’t quite work out was how to make the background image move all the way to the top of the page so that it sits behind the header. As a temporary measure, I used the page background image as a header background, but it is a textured image and difficult to match exactly.
  
  Another question - the menu looks fine on a PC but scaled way down on a tablet and phone. Is this something that I need to address by editing the header separately for phone/tablet? Or perhaps use the hamburger option for tablets/phones?
  
  The link you included - youtu.be/4u3g9nKYKFo - goes to a 404 browser message. Is it the same video as https://www.youtube.com/watch?v=UZjpvfqG6QU&t=120s
  

  0
• 

  Alex

  • June 03, 2020 12:50

  Hi,

  This is the link added in the previous post: https://youtu.be/4u3g9nKYKFo It refers only to the menu item.

  If you want to make the background image move all to the top of the page you need to have a transparent header. Unfortunately, at the moment, we don't have such an option but there is a trick. You can set the header overlay color to 0% or 30-20%: https://jmp.sh/ZrVW7o0 and then set a negative margin-top to the section below: https://jmp.sh/0cfe07f 

  Regarding the menu: You need to make separate adjustments for mobile and tablet.

  0
• 

  Martin Cielens

  • June 03, 2020 23:06

  Thank you - I will try that. And yes, adjusting for each viewing mode works fine.

  Oh for the ultimate algorithm that automatically makes adjustments for every conceivable device based on just one set of changes!

  0
• 

  Alex

  • June 04, 2020 11:24

  Many prefer to have a better look than the automatic algorithm does, so we offered the option to change this.

  0

Please sign in to leave a comment.