Where to change the logo area size and remove vertical lines in top menu

I've been using one of the one-page templates and am trying to increase the size of the logo area (horizontally) as well as to get rid of the vertical line next to the logo and the one next to the top menu (see screen capture attached). Where can I make those changes?

here's the screen capture

from a fellow user- should work

add this header size code to your head- change "height" below to whatever "px" you want.

<style type="text/css">

#header { height: 260px; }

</style>

try this- add this to head for no vertical lines:

<style type=”text/css”>

#header.full-header #primary-menu > ul {
border-right: 0px ;
}

#header.full-header #logo {
border-right: 0px;
}

</style>

Hope this helps!

Thanks for the reply about the height. I'm actually looking to increase the space available horizontally, not the height of the menu bar. The logo looks bad because it has to fit in the very small space available. I'd like to not have my logo resized so small.

try this in head:

#logo {width: 400px}

combine both in your style tag and you should have full control in height and width.

Of course, I would also check to see the width of your logo and then set the #logo width accordingly. Make the #logo a little bigger than the width of image. This advice seems to work on my test page - so give it a try and let me know.

Thanks for the reply! I've copied this code in the "head" section of the index.html page but the vertical lines are still there. Should I put the code somewhere else?

Thanks semicolonweb for the reply. In which file and section should I paste the "#logo img { height: 100px; }" code?

Re-read my code responses above for height and width...and no lines. Important- Code goes in head section AFTER all stylesheet links. So find the last stylesheet link and then insert code. You must also put between a style tag. Make sure you put both #header codes in for no-lines.

so your head will look something like this:

<link rel="stylesheet" href............. />
<link rel="stylesheet" href ............. /> (last stylesheet link)

<style type=”text/css”>

put code here

</style>

test it offline. It should work

Thanks a lot to both of you. It worked well for both the logo size and getting rid of the vertical lines. I added the code in css/custom.css and added <link rel=”stylesheet” href…………. /> for the custom.css in the index.html file. Thanks again!

Hello,

I tried the above on my one-pager and it actually work changing the size of the logo - which I really needed - thank you!

However, when I scroll down the logo keep scrolling as well - so essentially it remains on top of any new content, instead of remaining in place with the video background. This is what I added to the custom.css - is there any parameter I need so that the logo remains in its original position (does not scroll down)?

**#header.full-header #logo,
#header.full-header #primary-menu > ul { border-right: 0; }

#header.full-header #logo { padding-top: 200px; }

#logo img { height: 400px; width: 725px; }**

I tried adding position: (with values relative, absolute, fixed and all) to the #logo img and also #header.full-header #logo but does not seem to work

It worked thank you!

Another thing I tried successfully was actually moving the logo to the slider section - achieving the same result.