-
Posts
-
Hi,
First time using since update and updating to a child theme. Been working on website in fits and starts so knowledge is still patchy.
I’m having difficulties inserting the logo in the header so that it is retina ready. I have created a logo (x3 previous size to make retina ready) and inserted it with width 1500)
It takes up the whole header, pushing the nav bar underneath. Could you tell me what I am doing wrong?
On a related note, is it possible to have the header large with the nav bar situated underneath. I like the bigger logo and large header as it is for a primary school.
Many thanks
Peter
Hi Peter,
You can upload an image of any width, but the important part is setting the “Logo Width” in Customizer to a value that is appropriate for normal screens. For example, if you uploaded a logo 800px wide, you would want to put 400px as your logo width in Customizer. This will prevent it from taking up too much space on screen, but also allow higher density displays to make use of all the image data.
If you’re still seeing the nav items pushed down under the logo, it’s simply a matter of reworking your content to properly fit the physical limitations presented by the theme (this is a consideration that must be taken into account with all themes and designs). It is the same principle applied to filling up a room with furniture – there is only so much that can fit into a given space. The following should be considered in these situations:
- Logo Size – longer logos will conflict with navigation items as you size your site down. If you are noticing a conflict, you may need to implement some CSS to size down your logo as viewports get smaller.
- Shorter Names – you should always shoot to have your top-level navigation links be as simple as possible. For example, if your link is “Learn About My Company,” Try using “About” instead. It conveys the same idea and will save you a ton of real estate.
- Rearrange – sometimes we want to put all of our links in the top-level navigation, but not all pages are created equally. Pages of lesser importance that pertain to a parent link might work well as a sub-menu instead.
- Less Links – even on more “complex” websites with lots of pages, there are always ways to combine information together to make things simpler, which also ensures that your user doesn’t have to click around for every granular piece of information. For example, you might have two top-level links called “About” and “Contact,” which could possibly be combined into one. This eliminates the need for extra links and makes things much simpler for your users to navigate. Less is more in information architecture.
- Appearance – fortunately X features plenty of options for adjusting the appearance of elements throughout your site, and the navbar is one of the more flexible elements. Try using a smaller font size if possible to save on a little real estate.
Thanks!
Hi,
Many thanks for the swift response.
Just one more question!How do you insert a header image? I have seen on other X examples a large image with the nav bar underneath rather than just fitting the logo and text into the nav bar.
Many thanks
P
Hey Peter,
In that case, they are using a Stacked layout for the Header (see http://prntscr.com/3mzctp).
Hope that helps. 🙂
Hi,
Once again, many thanks for your outstanding support.
P
You’re most welcome!
