I recently added a widget to my website header for desktop mode. I struggled getting this widget to be on the same line and off to the right of the logo, but I eventually got it. In the process, it appears I messed up how the header looks on mobile devices (refer to twoguysplayingzelda.com for an example). Since 65% of my viewership is via mobile, I would like to fix this but have not figured out how. I would like the logo to be centered, completely view-able, and the menu icon on the left side (it use to be before I made the change). I am aware that I need to add coding into the responsive section of my style.css. Below is what I currently have for my header in CSS (desktop section). I knew nothing about CSS and HTML before I started my website, so I am still somewhat of a noob. Thanks for your help
div#header-widget-area {
float: right;
}
.header {
padding-top: 10px;
padding-bottom: 60px;
color: #01B3D9;
}
.header .cover {
background: rgba(29,29,29,0.0);
}
.header-inner {
position: relative;
}
.header .blog-logo {
text-align: left;
}
.header .logo {
display: inline;
float: left;
}
.header .logo img {
max-height: 50px;
width:auto;
}
The menu icon is pushed to the right by the logo because they both have float: left.
Try to remove float: left from .logo, and add display: inline-block to .blog-logo. That should fix both of your issues.
Related
My logo is overlapping my menu bar I just went to space it from overlapping
I tried changing the code but I'm a novelist so I really don't know what works I know about HTML but it's not the same.
.navbar-nav > li > a {
font-size: 20px;
}
.nav { right: 10px; }
Whenever I change the code it messes up the font size and it still over lamps
Here is the website:http://143wear.com
As you are using WordPress, through Admin dashboard you can set the max-width: 146px; to Logo,
Else you can use the following code into CSS,
By using this code there will be least chances for responsiveness issues,
In case you need bigger logo, you have to customize the code.
.site-header .logo img {
max-width: 146px;
}
.container {
width: 100%;
}
.header-logo {
width: auto;
}
.header-right {
width: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
justify-content: space-between;
}
Would be a working solution (might need some improvements for responsibility)
When I go to bottom of my website, I can't go back to top with the scrollbar. What might be the problem?
and I also have some errors on the browser console.
#wise-ticker .owl-controls,
#wise-ticker .owl-item {
padding-top: 10px;
}
.wise-ticker-title {
float: left;
display: block;
padding-left: 20px;
}
http://londonpostjournal.com/
Apply this code in your general stylesheet
html {
overflow-y: scroll;
}
Hope this will works for you.
I am creating a website with Wordpress for my mother-in-law (that's for the girly design). Basically I am near completion, but I am way over my head with two issues in the CSS. These seem very basic issues even from my standpoint of view, but with hours and hours of tinkering I am fresh out of ideas and Google didn't help me this time. It's been a while since I have had to create or modify any CSS.
First problem:
I cannot get the horizontal menu to center. I have tried to remove the float:left, I have tried to replace it with float:none and I have changed the display: block and display:inline lines to inline-blocks but the menu stays in its position. Only difference I have managed to make is to move the whole menu to the top of the page and that's not desired. What could be the issue in this?
Second problem:
There seems to be padding (the white lines) at the top of the menu and at the bottom and top of the small menu (mobile). I have tracked down all the padding-lines in the CSS but none of them really make a difference, only one which removed the horizontal paddings and that's not desired.
I would be really glad if somebody spots where I have gone wrong!
The website is at http://janenlahwr.cluster020.hosting.ovh.net/
Thanks in advance!
Best regards,
Tero Korhonen
Lappeenranta, Finland
Hi Tero,
the first problem has really quick solution - CSS3 Flexbox. You can read about it on this w3schools site.
Remove unnecessary float: left and add display: flex and justify-content: center to .main-navigation ul. So it should looks like this:
.main-navigation ul {
margin: 0px 0 0 0;
padding: 0px 0;
padding-left: 0px;
list-style-type: none;
display: flex;
justify-content: center;
}
Second problem you can fix with setting div.site-logo max-height = height your logo (I see that is 200px). So in this case should looks like this:
.site-logo {
min-height: 70px;
padding: 0px;
float: left;
line-height: normal;
max-height: 200px;
}
Edit:
Sorry, I forgott check for lower resolutions. There is problem with overflow. You set in style.css:640 overflow: hidden and it works correctly since resolution is above 800px. If not then activates this rule:
#media only screen and (max-width: 800px) {
#main {
overflow: visible;
}
}
that overwrites previous correct rule for #main overflow: hidden. So you have two options: delete this rule for screens over 800px or change this property from visible to hidden.
I hope I helped you with your problems :) Good luck!
For the menu problem, change your CSS rules like this:
.main-navigation ul {
margin: 0px 0 0 0;
padding: 0px 0;
padding-left: 0px;
list-style-type: none;
/* remove float: left; */
text-align: center; /* added */
width: 100%; /* added */
}
.main-navigation ul li {
position: relative;
display: inline-block;
/* remove float: left; */
text-align: center; /* not necessary */
}
This is the website, and more specifically, the page.
I'm currently working on a responsive theme, which has media queries, but something about the CSS modifications I've made, are preventing the menu (top right in gold), and the sidebar (this only exists on the blog page, but it is important... it's the box at the right of the content block) from merging with the header/title/left-hand content. It shows up on the ipad mini, the regular ipad 4, but it is okay in an android browser screen. You can observe the issue by resizing the browser.
#media only screen and (min-width:768px) {
.site-navigation .nav-menu {
display: block;
}
}#media only screen and (max-width:767px) {
.menu-toggle {
display: block;
}
}#media only screen and (min-width:768px) and (max-width:959px) {
.wrap {
max-width: 728px;
}
That is the media screen css. The respective divs are all positioned relatively. Does anyone have any advice on how to fix this problem? Any code tidbits?
The first thing I see is that this HTML is not closed:
<div id="header" onclick="location.href='http://camillagabrieli.com
That needs to be fixed first. Try adding outlines to your CSS:
* { outline: 1px dashed black }
I find that helps a lot when it comes to seeing what's actually wrong with the different floated elements. There are quite a few things wrong with your arrangement and your CSS. You don't need to relatively position all of these things.
To fix the main content section:
Add the following to #main:
overflow:hidden;
And make #content and #sidebar-primary like this:
#content {
float: left;
width: 75%;
margin-left: 40px;
margin-right: 10px;
margin-top: 10px;
min-height: 50px;
}
#sidebar-primary {
float: left;
width: 20%;
border-top: 1px solid #222;
border-bottom: 1px solid #222;
height: 50%;
}
I'm not sure why you had margin-top: -460px; in your code, but that was what was breaking it, as was the fact that #main wasn't actually containing #content and #sidebar-primary. The code still needs cleaning up, but this will fix it more immediately.
Does this help?
I'm trying to lay 3 things out on my forum: a bunch of media links top left, a menu bar top right and a logo beneath them centered.
Using this approach it appears exactly how I wanted on my localhost setup. However when I upload them to my live website, it looks different? Different in the sense that the logo seems to "see" the media box as its left margin, whereas offline is disregards it and centers on the page. Same browser, everything is the same which is why it's so baffling.
#logo{
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#brdmenu {
display: inline-block;
float: right;
}
#media {
display: inline-block;
float: left;
padding: 10px 10px 0px 10px;
}
I hope this isn't spammy but full CSS (and how it looks live) can be seen here: www.strengthandfitness.co.uk
The issue might be a lack of width on the #logo. Updated code, works for me in Chrome/FF:
#logo {
display: block;
text-align: center;
margin: 0 auto;
width: 650px;
}