{"id":2813,"date":"2021-06-23T14:08:00","date_gmt":"2021-06-23T18:08:00","guid":{"rendered":"https:\/\/thewpgeek.com\/?p=2813"},"modified":"2021-06-22T14:30:29","modified_gmt":"2021-06-22T18:30:29","slug":"sage-header-part2","status":"publish","type":"post","link":"https:\/\/thewpgeek.com\/sage-header-part2\/","title":{"rendered":"Finishing off our Header – Sage tutorial"},"content":{"rendered":"\n
Our header has come a long way from that early unordered list, but we should finish off our styling and ongoing issues before we continue.<\/p>\n\n\n\n
So this was an issue I had – and it seems others have also, but it’s worth checking to see if this even an issue for you before you apply my fix. If you resize your window do you see the Hamburger Menu? if not, then it seems to stem from a fix applied for a bug which to my knowledge doesn’t need fixing in the latest version of Bootstrap. Load up resources\/styles\/_variables.scss <\/strong>and comment out the last 2 lines :<\/p>\n\n\n\n We also need to add the following class to the nav in header.blade.php “navbar-dark”<\/p>\n\n\n\n Your mobile menu should now appear. <\/p>\n\n\n\n This is perhaps a personal preference, but I prefer a little more space after the navbar. I added this to the _navbar.css file we created :<\/p>\n\n\n\n With the extra space I liked the look of a slight box shadow:<\/p>\n\n\n\n The color I chose for the navbar is between dark and light. The default Bootstrap styling assumes a darker background and creates links that don’t have the required contrast. You may not have this issue if your navbar is a different color to mine. To fix this we have to use an !important tag. In our _navbar.scss file : <\/p>\n\n\n\n the default opacity is 0.5, I increased mine to 0.9 which will pass accessibility tests, but you could use plain white instead and save a few characters in the css file like this : <\/p>\n\n\n\n I changed my mind and went for a lighter color for the dropdown, in _navbar.scss I changed to this : <\/p>\n\n\n\n The space the admin bar takes up causes a display issue with the sticky header. This CSS code will fix it on mobile and desktop version of the site. <\/p>\n\n\n\n I removed the class (text-white) that changed the icon to white, from header.blade.php<\/strong> to fix contrast issue. <\/p>\n\n\n\n I like to build out sections and play with the colors, once I am happy with them I will rename them and create variables for them. Now I have decided on 2 theme colors in the menu, I will call these primary and primary-dark. It’s now time to set these up so we have access to them throughout the tutorial. The best thing with developing this way is we will be able to quickly alter the theme colors from one file in the future. <\/p>\n\n\n\n in resources\/styles\/common\/_variables.scss <\/strong>Sage already has this ready to go – so lets just make a few changes, this is my file now : <\/p>\n\n\n\n and we reference each of these colors like this : <\/p>\n\n\n\n Lets go through our _navbar.scss file and make any necessary changes. Here is my file now :<\/p>\n\n\n\n We can now reference these colors in lots of places yet have one central area to make color changes. <\/p>\n\n\n\n In our next instalment we will be working with sidebars<\/p>\n","protected":false},"excerpt":{"rendered":" Our header has come a long way from that early unordered list, but we should finish off our styling and ongoing issues before we continue. Hamburger Menu in Sage not displaying So this was an issue I had – and it seems others have also, but it’s worth checking to see if this even an […]<\/p>\n","protected":false},"author":1,"featured_media":2818,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[136,146],"tags":[139,165,149,140,116],"uagb_featured_image_src":{"full":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/fix-header-issues.jpg",1920,1271,false],"thumbnail":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/fix-header-issues-150x150.jpg",150,150,true],"medium":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/fix-header-issues-300x199.jpg",300,199,true],"medium_large":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/fix-header-issues-768x508.jpg",768,508,true],"large":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/fix-header-issues-1024x678.jpg",1024,678,true],"1536x1536":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/fix-header-issues-1536x1017.jpg",1536,1017,true],"2048x2048":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/fix-header-issues.jpg",1920,1271,false],"rigtest-featured":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/fix-header-issues-720x480.jpg",720,480,true],"mailpoet_newsletter_max":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/fix-header-issues.jpg",1320,874,false]},"uagb_author_info":{"display_name":"wpgeek","author_link":"https:\/\/thewpgeek.com\/author\/wpgeek\/"},"uagb_comment_info":3,"uagb_excerpt":"Our header has come a long way from that early unordered list, but we should finish off our styling and ongoing issues before we continue. Hamburger Menu in Sage not displaying So this was an issue I had – and it seems others have also, but it’s worth checking to see if this even an…","_links":{"self":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/2813"}],"collection":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/comments?post=2813"}],"version-history":[{"count":5,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/2813\/revisions"}],"predecessor-version":[{"id":2824,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/2813\/revisions\/2824"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/media\/2818"}],"wp:attachment":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/media?parent=2813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/categories?post=2813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/tags?post=2813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\/** Bootstrap navbar fix (https:\/\/git.io\/fADqW) *\/\n\/\/ $navbar-dark-toggler-icon-bg: none;\n\/\/ $navbar-light-toggler-icon-bg: none;<\/code><\/pre>\n\n\n\n
<nav class=\"navbar navbar-dark navbar-expand-md nav-custom sticky-top\" role=\"navigation\"><\/code><\/pre>\n\n\n\n
More space between menu and content<\/h4>\n\n\n\n
.navbar {\n margin-bottom: 10px;\n}<\/code><\/pre>\n\n\n\n
.navbar {\n margin-bottom: 10px;\n box-shadow: rgba(17, 17, 26, 0.2) 0 2px 3px;\n}<\/code><\/pre>\n\n\n\n
Better accessibility with higher contrast <\/h4>\n\n\n\n
.navbar-nav .nav-link {\n color: rgba(255, 255, 255, 0.9) !important;\n}<\/code><\/pre>\n\n\n\n
.navbar-nav .nav-link {\n color: #fff !important;\n}<\/code><\/pre>\n\n\n\n
Change dropdown background<\/h4>\n\n\n\n
.dropdown-menu {\n background-color: #2c2455;\n}<\/code><\/pre>\n\n\n\n
Fix sticky header with admin bar<\/h4>\n\n\n\n
body.admin-bar .sticky-top {\n top: 32px;\n}\n\n@media all and (max-width: 782px) {\n body.admin-bar .sticky-top {\n top: 0;\n }\n}<\/code><\/pre>\n\n\n\n
Change search icon color<\/h4>\n\n\n\n
<span class=\"input-group-text\" >\n <i class=\"fas fa-search\"><\/i>\n <\/span><\/code><\/pre>\n\n\n\n
Re-organize colors. <\/h4>\n\n\n\n
$theme-colors: (\n primary: #483c8a,\n primary-dark: #2c2455,\n secondary-yellow: #dea226,\n navtop: #f5f5f5,\n);<\/code><\/pre>\n\n\n\n
background-color: theme-color(\"primary-dark\");<\/code><\/pre>\n\n\n\n
.brand {\n margin-right: 2rem;\n font-size: 1.2em;\n text-decoration: none;\n color: black;\n}\n\n.top-header {\n padding: 10px;\n background-color: theme-color(\"navtop\");\n border-top: #202331 4px solid;\n box-shadow: rgba(0, 0, 0, 0.1) 0 30px 50px -12px inset;\n box-shadow: rgba(0, 0, 0, 0.3) 0 15px 32px -18px inset;\n}\n\n.nav-custom {\n background-color: theme-color(\"primary\");\n}\n\n.navbar-nav .nav-link {\n color: rgba(255, 255, 255, 0.9) !important;\n}\n\n.nav-custom a {\n color: white;\n}\n\n.dropdown-menu {\n background-color: theme-color(\"primary-dark\");\n}\n\n.social {\n color: theme-color(\"primary\");\n transition: all ease-out 0.5s;\n -moz-transition: all ease-out 0.5s;\n -webkit-transition: all ease-out 0.5s;\n -o-transition: all ease-out 0.5s;\n}\n\n.social:hover {\n text-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);\n transition: all ease 0.5s;\n -moz-transition: all ease-in 0.5s;\n -webkit-transition: all ease-in 0.5s;\n -o-transition: all ease-in 0.5s;\n}\n\n.facebook:hover {\n color: #4267b2;\n}\n\n.twitter:hover {\n color: #1da1f2;\n}\n\n.youtube:hover {\n color: #c4302b;\n}\n\n.pinterest:hover {\n color: #c8232c;\n}\n\n.instagram:hover {\n color: #fada5e;\n}\n\n.navbar {\n margin-bottom: 10px;\n box-shadow: rgba(17, 17, 26, 0.2) 0 2px 3px;\n}\n\nbody.admin-bar .sticky-top {\n top: 32px;\n}\n\n@media all and (max-width: 782px) {\n body.admin-bar .sticky-top {\n top: 0;\n }\n}\n<\/code><\/pre>\n\n\n\n