- This topic has 9 replies, 2 voices, and was last updated 9 years, 2 months ago by
.
-
Posts
-
Hi Wes:
I’m having difficulty aligning the 3 elements in the header: Logo Image, Primary Nav, and Search Form. See: http://akc-dev-site.net/
There should be enough room to align all 3 elements inline from left to right. But it seems to want to push the Search Form below the primary menu. I’ve tried to change the width of the various elements via Firebug, but something is refusing to cooperate.
Any insight would be much appreciated.
Yes it’s supposed to do that since they are two separate widgets. Widgets are inside a div in most cases, and most of the time those divs show up on separate lines. In order to do what you’re trying to do, you would probably need to make the widgets float left or right in your css.
Did you remove it? I don’t see it.
You would need to add something like this to your css in order to make that happen –
.header-widget-area section { float: left; }I’m not 100% sure if that will work since the search box isn’t there, but give it a try and see if it does.
I still don’t see it, but that code I added above should work. If you add it and the entire widget area falls under the logo to the next line, it’s because there isn’t enough room for the logo area and widget area to fit inside of the 1140px space. You can reduce the width on the logo/title area on line 1895 in your css file –
.title-area { font-family: "Open Sans",sans-serif; font-weight: 700; float: left; padding: 0; padding: 0; width: 160px; }Hi Kronos:
OK. I’ve made the suggested changes, but it still doesn’t work. Take a look.
Seems that the problem is now the width of the “header-widget area”. But there appear to be (to me) conflicting CSS instructions, including:
.site-header .widget-area {
color: #ddd;
float: left;
text-align: right;
width: auto;And then at the bottom of the stylesheet:
/* Desktops, laptops and iPads (landscape)
——————————————— */@media only screen and (max-width: 1139px) {
.wrap,
.site-header {
max-width: 960px;
}.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
width: 740px;
}.content,
.site-header .widget-area {
width: 620px;
}Which governs? Which do I change, without screwing everyone up?
Thanks!
I don’t see the code added in your stylesheet. Are you using a caching plugin or something that may be preventing the code from showing up…..or did you remove the code? I would need to see the code in there in order to know what needs to be adjusted.
I know. It’s weird. No special plug-in. Code is not removed. If possible, I can send you a copy of the complete active style.css file. I’ll send you my email in a private reply, and let me know. As indicated before, your help is definitely appreciated.
With my limited knowledge, I am definitely confused by the new HTML5 “responsive” code. Doesn’t seem as intuitive to a non-coder like me, compared to pre-HTML5. And Firebug doesn’t seem to read/ play-back the code accurately.
- You must be logged in to reply to this topic.