align header logo and nav menu

aliyarose
(@aliyarose)

10 years, 8 months ago
I would like to have my header logo as big as possible and in line with (and to the left of) the navigation menu.

I’ve done a couple of the fixes suggested in this forum (thanks so much!) to get me where the site is right now, and i’m not sure where to go from here!

here’s my current css:
```
/* logo (change width from 0-100%; float from left/center/right) */
.navbar-wrapper .brand {width:70%; float:left;}

/*menu bar size*/
.navbar-wrapper .navbar {width:29%; float:right}

/*menu bar text */
.navbar .nav {
display: block;
float: right;
left: 0;
margin: 0 10px 0 0;
position: relative;
}
```
I can also adjust my logo to be a different size, but the size it is right now showed up best of all the sizes I tried (tried making it 250×100 and then a couple different sizes bigger. the current logo is the biggest — 1024×120)

thoughts? thanks!

http://powersuits.org/

Viewing 8 replies - 1 through 8 (of 8 total)

Thread Starter aliyarose
(@aliyarose)

10 years, 8 months ago

sorry, i’ve changed the site to make things easier.

to clarify, i’d like to have the social icons and the navigation menu on the same line, just underneath the header logo. ideally the navigation menu on the left and social icons on the right.

any ideas the correct css?
thanks!

Justin
(@justinaboyd)

10 years, 8 months ago

Hey aliyarose,
The ideal way to do this would be to create a Child Theme and completely restructure the header.php file to fit your needs- including custom Classes and Divs to manipulate to your desire.

The Theme you’re using has some rather complex Div’s around the Navigation and Social Block, including an H2 Site Description that you’re not currently using, but if used later on could destroy any changes being made.

However, that being said, this “might” work:
div.navbar-inner div.row-fluid{ float: right; width: auto; margin: 0px; padding: 0px; }

Thread Starter aliyarose
(@aliyarose)

10 years, 8 months ago

awesome! thank you!

if in the future i want to dig in and edit the php file, is it the file within wp-content > themes > customizr > header.php ?
thanks!

rdellconsulting
(@rdellconsulting)

10 years, 8 months ago

No. Nic uses “object-oriented” coding, so most of the work is done in class-*-* files which can be found in customizr/inc/parts.

You’re looking for class-main-header.php

rdellconsulting
(@rdellconsulting)

10 years, 8 months ago

Recommend you do this in a Child Theme.

The process you need is:
Move the core file
FROM: customizr/inc/parts
TO: customizr-CHILD/inc/parts
using the same name.

Make the above changes in the CHILD version.

This way, when customizr is updated, you will keep your changes. You will need to check whether Nic has made any changes in that file in the new release. If so, you’ll need to repeat the process in the updated file.

rdellconsulting
(@rdellconsulting)

10 years, 8 months ago

Incorrect path above. Should be:
FROM: customizr/parts
TO: customizr-CHILD/parts

lynda.carter
(@lyndacarter-1)

9 years, 11 months ago

Please help me I also wanted both the logo on left and menu on right on same line tried couple of plugins and custom css as well for http://visatoaustralia.net but it’s not working I don’t know why, can anybody help me please.

rdellconsulting
(@rdellconsulting)

9 years, 11 months ago

This the Support Forum for the customizr Theme.

Looks like you’re using Agency Pro so find their Support Forum.