Free Transparent Header Tutorial in Wordpress - OceanWP Header

hey everybody welcome back to the channel today we're gonna design a transparent hat or something that's really popular in web design here is a example here is a example and here is an example we love those big image backgrounds and then the menu is overlapping the content on the page so that's what we kind of design today for free in vertebrates that's my alarm [Music] alright welcome back this video idea came from one of you from the man named stem and he said in Dutch like hey how do you get a transparent header with Elemento for free can you make a tutorial about it and that's a great idea because last week we have designed this section together and this is all done within Elementor but the problem with Elementor for free is that you can only edit the content between the header and the footer so if you just create a page in elements or like this you still don't have a footer and a header so there's no top and bottom and if you use a free team it's gonna actually look like this this is what you get out of the box when you install a free team like ocean VP which we're gonna use today but you can customize this header and this footer at the bottom we're gonna delete this footer at the bottom because we have designed our own food ER here but the header right now is very ugly so what we're gonna do is we're gonna transform this header into this header all right it has four pages it has a cool hover animation and it works on all pages and if you've designed a new page you can easily edit to the menu and it still works alright so let's get started the first thing that I did is install the team ocean we'd be or I should say ocean wvp no ocean WP that's a team that's free it's very popular if you just go to appearance teams and click on add new you can search here for ocean and then it pops up no it doesn't pop up if you type ocean we pee it pops up and you can activate the team so then you will get this alright so now we're gonna customize this we're not gonna do this in Elementor because with Elementor for free you cannot edit the header and the footer we need to do that within the team so we're gonna click on customize over here and we're gonna wait till it's loaded alright I'm gonna zoom out a little so here are the editing options for the team and let's just first elite the footer because we don't need this footer so we're gonna scroll down to food or widgets that's this part you can add widgets on your website within WordPress but we're not gonna need this so we're gonna just disable the footer widget and then it's deleted and now we're gonna go to the food or bottom and we're also gonna disable that and now we just have a clean footer we still have this button so we can scroll up really fast so that's it for the footer so if we click on publish now and we click on the X this is the page now if we scroll down there's no footer so it actually worked okay now first thing before we're gonna add the design is we need to add a menu in here because if we don't have assigned a menu before we're gonna edit the design we cannot see the pages so we need to make the menu first so what you need to do is hover over your name and then you click on menus I click on comment and then I click on menu so it pops up in a new window and there's no menu yet as you can see so we're gonna create our main top menu I always call it top main because sometimes you have different menus so this is the main menu for the top we're gonna click on create menu and now we're gonna add pages to that menu so on the left here you click on home I want portfolio I want about and contact and I'm gonna click on add to menu it's very easy now we can just drag it in the order that we want contact needs ability and maybe portfolio yes something like this so now here at the bottom we need to tell WordPress where the menu should pop up WordPress calls this the main menu so we're gonna click on main and now we're gonna click on save menu if we don't go back to our page and we click on refresh the menu should show up here as you can see and this is the default design for ocean VP and now we're gonna change this so it will look like this alright so click on customize again okay it's loaded and now we need to delete this bar and we need to delete delete' in this bar because we only need our logo our name and our menu item so what we're gonna do is we're gonna scroll down to general options and this part is called page title so we're gonna click on page title you cannot really delete it but you can hide it so go to stell and then press hidden and if you wait for it to load you can see that it's deleted it's hidden it's still there but you can see it we also need to do the same thing for this top bar so go back go back and we go to top bar and here we can just easily disable it so we're gonna click on enable uncheck the enable box now that's also gone so now this already looks a lot better so we're gonna go back we're gonna go to header go to general and now to stell here are some different styles and this is different for every team and this is why I chose ocean BP or I should say ocean WP because ocean WP has a lot of options to really customize the menu here so as you can see here is the transparent option so if you click on transparent you can see that the team automatically puts the content beneath the menu and it deletes the background white image but now it's not really visible so that's what we're gonna change first of all we're gonna change the height because as you can see there's a lot of white space here so go back and just increase the height just let's just say put it on ninety for example and they sable the header border bottom so this line will go away all right this already looks a lot better they're still a search icon here and the colors are not right but first we're gonna change the logo so go back and go to logo and now we need to select a logo so we're gonna click on select and I've already uploaded a logo it's just a PNG image so selected click on it you can click on skip cropping and then if you wait you can see that the logo is now here it it has already a hover effect make it smaller by changing the max width don't make your local too big because that looks very cheap something like this is good enough so that's perfect go back and click on menu and here are some styling options that we need to change first area is the links effect there are a lot of different effects most of them are pretty cheap I used underline from left and as you can see then it's line at the bottom animates in it doesn't look the same yet but it's the same effect so we change the color for the link effects to the color of my logo so that's the color for my logo so now as you can see the line looks a little bit more like the design now we're gonna go to main styling first we're gonna make the text white so we can actually see our menu items so click on white this already looks a lot better and for the hover effect I used a slightly darker color than white so you can see that something is happening but not a lot so just go to white and then make it a little more gray and now you can't really see it because it's really small but that's the effect that I used okay so scroll down and go to the search icon I don't want to search icon so I'm gonna put it on disable and now the search icon will be gone yes now it's gone and now we need to change the styling of the typography we cannot do it in here we need to go to typography and then again this is this is different for every team so sometimes you're spending a lot of time searching in the menus that's why I also recommend that you buy elemental pro because with an elemental pro you don't have to go inside the team settings you can just do everything within Elementor but for now we're using this so let's just go to main menu font family we're gonna pick the phone that I used for my website yes it's here monsterettes that's the phone that I used font size we're gonna make that bigger I think I use 16 or something maybe even bigger maybe I used 18 yes the weight it's pretty bold maybe even like 700 yeah maybe this one is even funny or is it no I think it's 18 but I've jumped in yeah I think I'm zoomed in that's why okay so I'm gonna leave it at 18 and as you can see this already looks pretty nice and now the only thing we need to do is change the mobile settings for this so click here on the mobile icon and now we can see how it looks on a mobile device it adds this text here and if you click on it this is not the style that we want so we can also change this on mobile so go back go back go to header go to mobile menu and here mobile menu stell we can change another style so for example drop-down all right so now if we click on it this looks more like what we want display the menu text no we want that so we only have this nice hamburger icon alright this looks already a lot better and we can even change this hamburger icon if you want to there are a lot of cool icons here some of them are really cheap oh this is the black one as you can see I need to make it white let's just try you can try different effects here for example collapse is pretty nice if you didn't click on the icon you know there's a nice animation here it's very simple very clean and if you scroll down you can disable the search bar for your menu over here alright this already looks pretty good and here we can also change the colors of course I'm gonna make the hover color the same purple color alright and maybe just make the borders also white so there are actually no borders this looks pretty good alright I think this is good enough for now I'm gonna click on X and I'm gonna go back to web and I'm gonna click on publish and let's just see what we've created so click on the X and as you can see right now oh I think it's yeah it's a little bit too big I think I need to put it on 16 but as you can see this is pretty nice I'm pretty happy with it and the great thing about this is that it's free and now we use the team settings to change the menu like I said I use element 2 a pro to create all of my menus and my footers because I just like the way that elemento works instead of you know going into the team settings and changing all of that but this is free this is free you cannot do everything in a menu but a simple menu like this works and it looks pretty good so if you have any other questions about how to make this website please let me know and then I hope to see you in the next video you

Channel: LivingWithPixels

Views: 60,450

Keywords: webdesign portfolio, web design portfolio, web design portfolio websites, wordpress header, wordpress transparent header, transparent header, transparent header css, elementor transparent header, elementor header, elementor header menu, wordpress menu, wordpress menu customize, wordpress menu plugin, oceanwp header, oceanwp sticky header, oceanwp, oceanwp theme tutorial, oceanwp transparent, wordpress transparent, transparent menu, overlay header

Id: VUw5YbeGE9Y

Length: 12min 36sec (756 seconds)

Published: Tue Sep 24 2019