Wix Menu Bar: How to Create a Navigation Menu on Your Wix Website

so in building our header we need a few key elements we're going to need our logo we're going to need our menu probably want a button that has some kind of call to action and we're going to want some links to our social media and remember we planned all that out on our little piece of paper earlier so we're actually going to add a strip to our menu so that we can have multiple columns and make better use of this space so let's move this strip out of the way just for now drag in a new strip and then we want to move this up to the header so to do that we're going to make the strip smaller and we're going to make it page width once we've made it page width we're going to make it a little smaller so it can fit in the header drag it up it'll glow orange and it'll say attach to header let's say you know it's actually being attached to the header and not being moved behind the header so if you don't see this orange box this is attached to header you're not in the header you need to probably make your strip smaller so it'll fit within that header or you need to unstretch it okay so our strip's back in the header we can stretch it again to make it excuse me we can make the header smaller to make it the width of the strip and then we can click the stretch and stretch it back to the full screen okay so now we have a strip in our header it's a great start and now let's make this two columns one column we'll hold our logo the other column will hold our menu and our button and our social media links so we click add column and we have these two big columns let's change the layout the logo is only going to be in the left corner right so we can make that probably something like 25 of the strip okay so now we have two columns and if we click again on this on column one we can click layout and we're going to line the content to the left that way we have the logo directly in the left corner and then on column two we do the same thing click the column click layout and align it to the right and now all of our content is going to fit in here within these black and white dotted lines okay so now we're going to drag our logo and our logo is just going to be an image that we uploaded earlier we're going to drag our logo into the header folder for that cool it says attach to header so that's good we're going to make sure it's within those dotted lines now it says attach the column okay now our logo is in the header and we're going to link this as well to the home page most people know that if you click on the logo you can go back to the home page but you have to do this manually in wix so now our logo is in there clicking the chain link icon and then clicking page home okay now we're going to drag our menu into this column so we hit the plus button we go to menu and then theme menus we're going to drag this first one in here it says attach to column cool now we have a menu in here but this isn't the right order of pages and it's all the pages we want to have so we click manage menu and we can change the order of the menu and add menu items so we're going to add some menu items and reorder this so blue button add menu item and then site pages these are all pages that exist on this website the order i want is blog first then our videos then our then our shop is actually gonna be a button so we're gonna remove that the three dots we're gonna click and say hide from menu we're just gonna hide it from the menu not the whole website and we're going to move the forum up after the videos so we got blog videos forum about contact i think that'll work so we can click out of out of that and now we want a button for our shop and we want links for our social media so button we'll do that themed button again put it just to the right so now the button will say shop and where it says what is it linked to we'll click there and go to page and we'll select the shop page okay so now i have a button that says shop that's linked to our shop to make it really obvious that people can click to our shop and go shopping how many times can i say shop okay and so now we're gonna add social media buttons above the menu and the shop button so we'll click plus and then under social right here we have these bars let's do black buttons for now and so now we have all these links to social media let's put it to the right aligned on the right with the shop button those are really big right so if we click layout you can make those smaller like 20-ish move back down let's maybe make this button a little bit smaller so we can drag on the corner to make that a little smaller so now we have a header and let's drag our strip back up now okay so we have the start of a website already we have a menu we have a logo we have our hero image a button to click to the shop we have our social icons we are moving now to set your social links you can click set social links and then all you have to do is click what social page does icon link to you click there and you just type it in so ours is paired digital okay also if you don't like these icons you can click the replace icon and choose a new icon so typically you can just search facebook and then they have a bunch of different icons for facebook you can do a circle you can do this the actual brand colors of facebook keep it black the way it is for now now one thing you might have noticed is that our menu font isn't the same as our other fonts i think we want this menu font to be our heading font just because it's a nice style i like the way it looks so we're going to click the menu and then we click design this pops up and we're going to customize the design at the bottom this blue button so we click there we have all these options and so under regular we can click text and then choose a theme remember we set our themes earlier so we can choose our i chose the h6 for dalton it's at the 26. now i think that's a little big so let's make it maybe eat 20. that's a good size maybe even 18 because it's a capital font i think 19. that seems like a happy medium okay now we have regular hover and clicked so the way each one of these menu items appears is going to be different depending on how you're interacting with it whether you're hovering over it whether it's the page you're on because you've clicked that that link or if it's just sitting there so if we hover over it maybe we want it to be red like our brand colors you can see an example of what that would look like maybe we want it to be blue because our shop button is red and that's a nice contrast i think maybe let's keep it as blue i think that looks great and then if it's clicked we can it can be red a lot of design is like this you really just sort of feel out what you think looks best to you as you do it more and more you get a better idea of what looks good and what works and what doesn't a lot of it is just practice and repetition okay so now we have our full menu ready to go in the next video let's talk about styling our buttons

Channel: Parrot Digital

Views: 740

Keywords: wix menu, menu bar, website menu, create wix menu bar, wix navigation, web design, wix tutorial, website builder, create a website, how to make a website, make your own website, free website, build a website from scratch, how to, website maker, web design tutorial for beginners, web design tutorial, wix website, how to customize pages and navigation menu bar in wix

Id: DZqTGWyt2ww

Length: 8min 44sec (524 seconds)

Published: Fri Aug 13 2021