Metro Theme Navi HTML5

[Brain916]

Hello,
I just converted my website (test.sneakerfiles.com) to HTML5. I am happy that everything went decently well, but I am having one heck of a time getting the Navigation aligned correctly and the secondary navigation doesn't have the correct colors either.

If you visit the URL above, you can see how it is off and below I have a screen shot how it was before and would like it to go back to

http://test.sneakerfiles.com/

[Brad Dalton]

Please delete this PHP code from the end of your child themes style.css file:

/** Custom image sizes */
add_image_size( 'Slideshow', 520, 280, TRUE );
add_image_size( 'Small Thumbnail', 70, 70, TRUE );

Have you made any changes to the CSS code in the file?

---

Tutorials for StudioPress Themes.

[Brain916]

Hello @braddalton

I just removed that code and nothing has changed.

I have made a lot of changes to the css. I can upload it somewhere...what can I do to fix this?

[Brad Dalton]

I suggest you compare it to the original file using an online tool and place all the modified code at the end of the file for easier management.

There must be a problem with the code which why it may be better to replace it with a fresh copy. Backup the file locally first.

You can then add one rule at a time back to the end of the file to find out which code is causing the problems.

Always copy the rule the want to modify to the end of the file before modifying the code.

---

Tutorials for StudioPress Themes.

[Brain916]

Hey @braddalton

I actually installed a fresh copy of the Metro theme (just picked the Blue color) for the site and it still is the same. As you can see, the header is large, search bar is also.

[Brain916]

Ok, I found the problem. Search bar is too large and is pushing the navibar making it too large. Is there a way to make the search bar smaller?

[Brad Dalton]

You can reduce the height of the search bar or hook in the search bar using a different method.

You're in luck because i wrote about already and tested the solution using the Metro theme.

---

Tutorials for StudioPress Themes.

[Brain916]

Hey, I am kind of getting it, but what I notice is, the search bar will not align completely right. Is there something I can add in CSS to achieve that?

Also, what code could I put in to shrink the search bar size?

[Brad Dalton]

The CSS code included in the tutorial enables you to increase the negative margins to reduce the size.

You may have to use the default CSS for the search box at the end of the file and change the values to work with your custom search box.

---

Tutorials for StudioPress Themes.

[Brain916]

I have tried this, but I can't get it correctly. I would like a little bit of black around the search bar, basically where it is sitting nice and snug in the search bar.

For the time being, I got it to work, but that was due to making the navigation bigger.

Also, do you know how to make the search bar sit all the way to the right?

[Brad Dalton]

Not sure how to move it to the far right.

---

Tutorials for StudioPress Themes.

[Author]

Posts