Building A Website: Part 3
Customizing The Page Header
Before we move on to customizing our product page we are going to first customize our header. This way we can see exactly what our shop page looks like before we move forward and it will also help with our other pages as well. We are at the point where the website is starting to come together, so the better image you have of the final product when designing the rest of the site, the less you will have to go back and edit later.
To customize our site we ill be going back to the pro builder that we used to customize the shop. So, go to the templates section of the pro builder and click the add new button.
Leave everything as is. We want a header and we are fine choosing the entire site because when we customize our posts it will override on those pages.
Click next.
I actually like this template, so select the ‘Master – Center Logo Header’ option and let’s give it a try.
Click publish.
So I like it, but the first think I notice is I would like it to be a little smaller, I don’t need the social links, the logo needs to be there, and the cart icon needs to be added. Let’s start making these changes, starting with the logo.
In my instance there is a logo box already in existence but nothing is showing up. So double click it and open up the editor.
It looks like it is trying to show text while we want an image, so click the image display and select our logo.
Well that looks like trash. I tried changing the image width too and it still looked bad. Whatever, let’s just scrap the logo element and drag an image of it over instead, making the width 150 px.
Much better. Next, what I am thinking is to remove the social links and replacing them with the menu, and then having the login button on the right.
To do this go ahead and delete the social links and drag over a menu element. make the background black and transparent for both the ‘general’ and ‘link’ aspects, and then change the font size to 22px and give it a color of #ffffff and then make it lighter upon hover. Additionally, this is only going to work for desktop and tablet, so duplicate the row and then disable it’s visibility for mobile. There is too many things that we will want to be mobile/desktop specific so we are better off just having two versions.
After that, let’s drag a button over to the right and delete the menu section over there. Make sure it is right aligned, give it a black background with a white link, and then a white background with a black link on hover. Once that is done, on the bottom of the button tab select it to only be visible to logged out users. Duplicate the button and then change it to “log out” and only visible to logged in users. Lastly, copy the login and log out button links and paste them into the button link area for both buttons and give them a right padding of 5%. Give the left navigation bar a padding of 5% while you’re at it and save the changes.
For the mobile version, move the logo over to the left and keep only the right navigation. You will then probably want to make the logo smaller and shrink the bottom padding of the header as well. It should look like the image below, where the top is for desktop and tablet and the bottom is for mobile.
At this point I want to see what it looks like and how it works. So go ahead and open the site in an incognito window as well as on your phone so you can get a good feel of what it looks like and how it works. Try to login, log out and scroll. See if anything stands out to you.
What stood out to me when I used it is that on mobile I can’t login or log out, and when I scroll the navigation goes away on both platforms. Also we forgot to add the cart icon. So let’s fix this.
the first thing we are going to fix is the scrolling issue. I want users to always have access to the navigation bar, and to allow them this access we need to make the navigation bar “sticky”. So, open up the row builder element and go to the animation section. It doesn’t matter which row because we are going to need to do this for both.
From here go to the ‘STICKY’ tab and then check to box to make it sticky at the top of the page.
Repeat this for the other row, save the changes and test the navigation again.
It looks pretty good and we have our sticky navigation now. Let’s move on and drag a cart icon over next to the buttons for desktop, and the menu for mobile. Save and check it out. As you will notice it is not going to work. The icon is sitting under everything.
To fix this we are going to have to get creative with our styling. I already think I know how to fix this, but I have been designing sites and using the Themify builder for a long time. When you encounter situations like this just keep trying different ideas. Some will work and some won’t. What I would suggest is before reading my solution see if you can come up with a solution on your own, then read the below paragraph to see what I did.
When I see problems like this I know they can usually be solved by manipulating the rows. So, I am going to drag a four column row over and drop it in the far right column for the desktop view. I am then going to place the button in the third column and the cart in the fourth. For the mobile version I am going to change the layout to have the cart in the right corner, the logo back to the center and the menu on the right. I am also going to change the cart to drop down instead of slide out because I think it offers a better user expereince.
I am actually extremely satisfied with that so let’s move forward and make our final change, the ability for users to login trough mobile. For our mobile view, since we are pressed for space, we are going to make it part of the menu. So, open up your dashboard in a new tab and go to the menus section.
We are going to create two navigation bars, “Mobile Nav (logged in) and Mobile Nav (logged out). The navigation bars will be the same as our main nav with the exception that there will be a login custom link on the logged out nav and a log out custom link on the logged in nav. So go ahead and create those and go back to our template builder. Once on the builder, duplicate the nav in the mobile section and select to add a custom menu.
Set one to the logged in menu and at the bottom select it to only show for logged in users, and do the opposite for the other. Once you are done, save your changes and test everything out.
I noticed during my test that our cart slide out is now white again. So see if you can figure out why that is and then read the paragraph below for the solution.
Using F12 and the google developer tool I noticed that the id has changed to tbp_slide_cart. So going back to customize section I replaced the old id with the new one.
Test everything again, and if everything works the way it’s supposed to we are then ready to move to the next section and customize our product page.