Snippets

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

  • Updated:

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;
    }
All PHP snippets should be added via child theme's functions.php file or via a plugin. We recommend Code Snippets (100% Free) or WPCode (sponsored)
Back To Top