How to Change the Text Alignment for your Mobile Menu Items in Hydra

BoldGrid themes contain a number of inherent styles that control the display of your menus across a variety of screen sizes to make a building a responsive website as easy as possible.  Mobile menu items in the Hydra theme are centered by default, but you can change this style decision using your own CSS.  The steps contained in this guide demonstrate how to use CSS to customize the text alignment of your menu items.

Using media queries is the best way to ensure that customizations created by additional CSS only affect the display of items at the intended screen sizes.  The CSS snippet included in this guide uses a media query to specifically target the alignment customizations for mobile and tablet views while leaving the desktop display unchanged.

The stylesheet for the Hydra theme already contains a selector that specifically targets and sets the alignment of your menu items and this selector will get incorporated into the custom rules.

We start by creating the media query to make sure the new rules only apply to tablet and mobile screen sizes.  In BoldGrid themes a screen width of 992 pixels or greater notifies the responsive framework to show the desktop display and setting the media query to only apply up to 991 pixels means that our rules will only work for screens smaller than the desktop width.

@media (max-width: 991px) {

}

Next we need to add the CSS selector used to target the menu items into the media query.

@media (max-width: 991px) {
    .navbar-nav > li > a {
    
    }
}

Now that the media query and selector are in place we can begin adding the rules to change the text alignment property for our menu items.

@media (max-width: 991px) {
    .navbar-nav > li > a {
        text-align: left;
    }
}

Alignments for Left, Right, and Center will be the most common options that you use, but there are additional options for the text alignment property.