Snippets: Dev Header (Logo/Left Menu/Right Aside Content) Basic CSS Styling Example

If you enable the Dev style Header it will load all the header components but without any CSS. Here is some basic CSS to get you started if you can use if you want a left logo, left menu and right aside content.

/**** Header CSS ****/

    /* Set header inner element to a flex box model */
    .header-dev #site-header-inner {
    	display: flex;
    	padding: 0 30px;
    }

    /* Tweak menu design */
    .header-dev #site-navigation {
        margin: 0 30px;
        height: 100%;
    }

    .header-dev .main-navigation-ul {
    	height: 100%;
    }

    .header-dev .main-navigation-ul > li {
    	display: flex;
    	align-items: center;
    }

    .header-dev .main-navigation-ul > li > a {
        padding: 0 15px;
    }

    /* Move header aside to the right */
    .header-dev #header-aside {
        margin-left: auto;
    }

    /* Vertically center header aside elements */
    .header-dev #header-aside .wpb_wrapper {
		display: flex;
		align-items: center;
    }

    /* Set header aside elements to display inline */
    .header-dev #header-aside .wpb_wrapper > * {
		display: inline-block;
		margin-left: 20px;
		margin: 0;
    }

Snippet Type: PHP

Posted Under: Header

All PHP snippets should be added via a child theme's functions.php file.