closed resolved
elames
Member
If you would look here: http://fairfaxandpage.com/
I want the entire striped logo to fill the area so there is no black showing on the top and sides. How can I do this. I have resized the image to fit what is supposed to be the container size, but it just shrinks it to fit.
Also anyway to stretch out the navigation to fill across the entire width? I have been trying but not good success.
Thanks alot!
1) Add following code to css/custom.css to center the logo:
.logo, .logo a {
margin: 0 0 0 -8px;
}2) I'd add a margin-right to the menu items like:
#top .main_menu .menu li {
margin: 0 44px 0 0;
}
#top .main_menu .menu li:last-child{
margin: 0;
}You can replace 44px with any other value if you'd like to adjust the space between the items.
elames
Member
The menu code worked, but if you look at the page again, I cannot get the logo (960 wide) to fill in the black space . Do I need to redo the logo to a different width?
Is there a way I can set the MAIN navigation to change to the pink color (hover) when I mouse over it rather than having the pointy arrow?
Also, is there any way to make the 3 buttons lower on the page the same size?
Thanks for your help. Always really appreciated!
elames
Member
Still having a problem here. Any ideas?
On IE & Firefox, the header is covering the entire width, but it is not happening in Chrome,nor on my tablet :-( And on my tablet the navigation now goes to a second line. Guessing that is because of the spacing???? Still have not been able to accomplish a different hover color over the navigation either. Been trying things but not working.
I got the buttons the same by just creating them myself.
Hope to hear from someone soon.
elames
Member
Thought I had the hover problem solved, but when I mouse over the dropdown menu, the text was not visible.So that didn't really work. I am at a quandry now.????? The one major concern and that is the header not covering the entire width in Chrome but is in other browsers.
thanks
Nick
Moderator
Hi,
1) You can try this. If you don't like you would need to make a 990px wide image to wit
.logo img {
position: absolute;
top: -5px;
}2) Yes you could change the menu but such a customization is outside the scope of the support team , since it will need to be partially rewritten to accommodate your requirement.
3) When you write code, never use <div> naked because its difficult to isolate that div. Always use a class, just come up with any name.
<div class="my-middle-links">**** place block of code that you want to move in here **** </div>The way you have it set up now, there are naked div's everywhere so its hard to grab the entire block.
4) You should not be doing buttons the way you are doing them. Place the code below into your custom.css file. then when you want a link to become a button, you just add a class to the link (see below).
/* ADD THIS TO CUSTOM.CSS */
.buttonz {
display: inline-block;
position: relative;
margin: 10px;
padding: 0 20px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(255,255,255,.22);
font: bold 12px/25px Arial, sans-serif;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 1px 1px 1px rgba(255,255,255,.44);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 1px 1px 1px rgba(255,255,255,.44);
box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 1px 1px 1px rgba(255,255,255,.44);
-webkit-transition: all 0.15s ease;
-moz-transition: all 0.15s ease;
-o-transition: all 0.15s ease;
-ms-transition: all 0.15s ease;
transition: all 0.15s ease;
}
.buttonz:hover {
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .3);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .3);
box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .3);
}
.buttonz:active {
-webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
-moz-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
}
/* Big Button Style */
.bigz {
padding: 0 40px;
padding-top: 10px;
height: 45px;
text-transform: uppercase;
font: bold 20px/22px Arial, sans-serif;
}
.bigz span {
display: block;
text-transform: none;
font: italic normal 12px/18px Georgia, sans-serif;
text-shadow: 1px 1px 1px rgba(255,255,255, .12);
}
/* Green Color */
.greenz {
color: #3e5706;
background: #a5cd4e; /* Old browsers */
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* IE10+ */
background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* W3C */
}
/* Blue Color */
.bluez {
color: #19667d;
background: #70c9e3; /* Old browsers */
background: -moz-linear-gradient(top, #70c9e3 0%, #39a0be 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70c9e3), color-stop(100%,#39a0be)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* IE10+ */
background: linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* W3C */
}
/* Gray Color */
.grayz {
color: #515151;
background: #d3d3d3; /* Old browsers */
background: -moz-linear-gradient(top, #d3d3d3 0%, #8a8a8a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(100%,#8a8a8a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d3d3d3 0%,#8a8a8a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d3d3d3 0%,#8a8a8a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d3d3d3 0%,#8a8a8a 100%); /* IE10+ */
background: linear-gradient(top, #d3d3d3 0%,#8a8a8a 100%); /* W3C */
}Now you have 3 buttons, i called them buttonz because you already have buttons and I didn't want to mix the css code. The three colors are bluez, grayz, greenz.
So lets say you want to make a big blue button pointing to yahoo that's green. All you do, is add to your code
<a class="buttonz bigz greenz" href="http://www.yahoo.com">Yahoo</a>So for your example :
Instead of using for your Consultation button:
<a title="Consultations" href="http://fairfaxandpage.com/consultations/" rel="attachment wp-att-2734">
<img class="alignnone size-full wp-image-2734" title="consultations" src="http://fairfaxandpage.com/wp-content/uploads/2012/10/consultations.png" alt="consultations" width="202" height="52">
</a>You would add just the link below to your content you will get a nice button that looks like an image without being one. (see what looks like -> http://i.imgur.com/shBcH.png )
<a class="buttonz bigz bluez" title="Consultations" href="http://fairfaxandpage.com/consultations/" >
Consultations
<span>
It's Free!
</span>
</a>The little buttons are created when you dont add 'bigz' to the class. if you want to make different colors or sizes, please look how the colors are made above, and just add your own.
Thanks,
Nick
elames
Member
Nick. I put in the logo code you suggested. My logo disappeared from IE and Firefox and the padding changed from right to the left now????
Sorry this is way too confusing. I don't understand why this is happening. I am not a coder so don't really know what to do next. The logo image is 990 pixels wide.
elames
Member
Ok, I have just got about everything sorted out. With the exception of this darn logo image....GRRRRRR....
It fills the space when viewing in IE & Firefox. so..that is a good thing...but in CHROME, it does not....that is the bad thing. Is there anyway to correct for this issue?
Sorry to be such a pest, but I am trying to learn.
Thank you for all your support!!!! You all are the best! I recommend to anyone needing a theme.
elames
Member
I FINALLY figured something out. I haven't a clue if this is the correct style or not..but all I know is that it worked and that's all I care about.
This is the code I finally came up with to get the logo to fill the space
.logo, .logo a {
margin: 0 0 0 -15px !important;
}
.h1 class,.logo{
width: 990px;
}
This topic has been closed to new replies.
Please start by registering an account for this forum here
Create a new thread and tell me what problems you are encountering and what you want to know.
There is no step 3 :)
We try to answer all questions within a day, monday-friday.
