Oct 10 2018
Oct 10

The Main Menu on your website is the first thing that catches visitor’s attention. Besides, it’s one of the most important elements that will assist the user in an effortless and intuitive navigation. In this article we are going to talk about how to design a Drupal Drop-down Menu with Glazed Theme.

Before diving into customizing our Main Menu, learn How to Create Drop-down menus with Drupal 8 and Glazed Theme.

To start customizing our menu design we need to go to the Glazed Theme Settings page. Amongst a dozen of options that are directly responsible for every element of your website design and how the end-user sees it, we are going to find the Header & Main Menu - the place that will change how our menu looks like.

Header & Main Menu

When navigating to the Header & Main Menu, first thing that will come to our attention is the “Top Header Options”.
Clicking it will open an entire new world of possibilities. Here We can choose 1 of the 7 layouts that come pre-installed with Glazed Builder. A layout for every taste! Depending on what you want to choose for your website, you can pick between having your logo on the left and menu on the right, which is the default layout that you are already familiar with (spoiler: the one on this website), having everything beautifully aligned in the center, place the menu on the left, or several others.

Header style is probably one of the most important settings here and will determine the overall look and feel for your website (will it be more minimalistic or will it have a more “heavy” look to it?). We are able to choose between 3 general types of header styles: Normal, Overlay or Pull-down Navbar.

You can see examples of each header style and header layouts on the Glazed Theme Live Demo Page.

Each one of these options look great when implemented, but they are going to need some further refinements to look exactly how you imagined. This brings us to our next element: Height. Choosing the height value will determine how tall or short our main menu will be. Once we got our perfect Height settings we will move on to deciding whether or not we would like our Menu to have a fixed position. A fixed header stays at the top of the browser window when a user scrolls.

Behavior of the Drupal Drop-Down Menu

If we decide that we want our menu to stick to the top of the browser when people scroll, then another option will pop-out asking us if we would also like a sticky header – which basically means that the menu will appear only after the user scrolls past a certain point on your page, only then will it stick to the top of his or her window. This will be determined by the scroll offset, height & background opacity values that you decide on.
Congrats! You’re past all the technical aspects of your gorgeous Menu bar. (Well not really but for now we are moving on to the fun part - choosing the colors)

Customize Navigation Colors

Here is the place where it all comes together. You can choose colors from your website’s color scheme (Custom one you made or Glazed Default) or add individual values to each settings’ custom color. In this menu we can choose the colors for every aspect of the navigation menu: text color, drop-down background, menu hover text, etc.

After we are happy with the result we can move on to adding the final touches to our menu design.

Side Header & Mobile Menu Options

In this area you can choose the layout look on mobile devices and your side header (if you choose to opt for one in the beginning). You can determine elements such as content alignment (left/center/right) and menu bar width.

The Main Menu Link is for determining the font style and hover style of our Main Menu (both website & mobile versions).
Last but not least, by going to Mobile Header menu we will determine the mobile breakpoint and the height of our menu in order to make it even more mobile-friendly.

We have designed a brand new Main Menu for our website which will be enjoyed by the visitors and help them easily navigate to the information they are looking for!

We also created some Main Menu designs along with you so you don’t get bored doing it all by yourself. We’ll leave each settings value below. If you like any of them feel free to recreate or use them as an inspiration for your future eye-catching Main Menu.

DESIGN 1

Oct 03 2018
Oct 03

Sooperthemes Glazed Builder is a Drupal drag & drop page builder made to revolutionize the way professionals build websites with Drupal. Glazed Builder is fully integrated with both Drupal 7 and Drupal 8 and gives the marketing staff, content teams and site builders the tools to do a faster, more efficient job! And guess what? You can build a fully functional website with Glazed  Builder without ever having to touch a line of code!
The builder provides 36 fully customizable elements to help you make and share beautiful and appealing content on your website without breaking a sweat. In today's blog article we are going to cover five Glazed Builder Elements and show you how to use and personalize them:

1. Countdown Timer

The first Glazed Builder Element we are going to talk about is the Countdown Timer. Using this module is a great way to create a sense of urgency about your campaign and persuade the customer to act soon if they don't want to miss a limited time offer or that amazing upcoming event your team worked so hard to put together. 

Currently there are six countdown timer styles to choose from, with the options to count to a specific day, hour, minute and second. It is also possible to set Date and Time limitations for a specific Date only, Date and Time, Time only (repeat every day) and Resetting Counter (with an interval up to 24 hours).

How to Use the Countdown Timer element

In order to create a new Countdown Timer, we are going to choose "Add Elements" by clicking the "+" icon. 

Sep 26 2018
Sep 26

If you are at least a little bit familiar with Drupal, then you most likely heard about Drupalize.

Drupalize is one of the most active players when it comes to updating their tutorials in order to keep the content up-to-date with the new features that come to Drupal 8. The material provided by them starts all the way from the Basics and Site Building, and moves on to covering more advanced topics such as Management and Strategy.

With the largest collection of Drupal premium learning videos, Drupalize has thousands of tutorials you can choose from. If you are interested in: Learning to Build Drupal Websites, Working with Drupal Themes, Becoming a Drupal Developer, Learning Drupal 8 or in an Introduction to the Drupal CMS - then Drupalized is the right choice for you!

Not sure whether or not it’s worth the investment? Check out their YouTube Playlists made in association with Lullabot, which cover topics such as: Drupal 8 User Guide, Configuration System, or How to Install Drupal for Local Development and see if the content provided by them meets your expectations.
In order to recognize contributors' hard work, Drupalize.me offers a Free Membership to the drupal.org Project Maintainers and those listed in the Drupal 8 MAINTAINERS.txt file.

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web