Media Queries in Lodestar
-
Hey there,
Looking to either move my site logo to the top right of both the mobile and desktop versions, but cannot figure out how to get the media queries to work with the css. I have tried @media only screen and (max-width) and some other variations without success. I need to use queries because the placement of the menu on mobile is different than in desktop, and the logo would be covered/cover an element in one or the other. Any ideas would be appreciated. I have also thought about using the second header top text to create an image link and just hide the site logo, if that is easier to manipulate.
The blog I need help with is: (visible only to logged in users)
-
We can do this, but what do you want to do with the “Try a Free Week of Classes” at top right? If we put the logo above that, it is going to end up making the top header area taller. We can make the logo smaller when up there, and even insert the logo image into that div, above or below the text. Let me know your thoughts on that.
-
I was thinking just putting the logo up there in general. On both desktop and mobile i want the logo up in that div. With the desktop view where the menu is displayed in rows across the top, I want to place the logo to the right of the menu, but to the left of the “Try a free week” link. My thoughts were having the top of the logo in between those two areas. that doesn’t work well, I also have no issue with moving the “Try a free week” link. As for mobile, if it is possible to push the menu dropdown further left and place the logo to the right, that would be ideal. If not, just placing the logo to the right of the menu is fine, and I am definitely okay with resizing. I have included links to some quick paint images of what I am describing.
https://www.dropbox.com/s/5iyfwprp6ewpmdr/desktop%20move.png?dl=0
-
Hi, this is being a bit challenging, but wanted to let you know that I’m working on it for you. Hopefully I’ll have something for you within a few hours.
-
Hi, let’s give the following a try. First off, remove this from your custom CSS as it will make this solution not work.
@media screen and (min-width: 360px) {
Next add the following and then see what you think..header-top .wrap { background: url('https://becomecrossfitwod.files.wordpress.com/2017/02/wildtransparent12.png') no-repeat scroll right 10px / auto 110px; } .has-top-content .site-top-content, .has-top-content .main-navigation + .site-top-content { vertical-align: bottom; padding-bottom: 0.5em; padding-top: 7em; } @media screen and (max-width: 959px) { #site-navigation { text-align: left; margin-left: 20px; } .has-top-content .site-top-content, .has-top-content .main-navigation + .site-top-content { padding-top: 3.5em !important; } } @media screen and (max-width: 400px) { .header-top .wrap { background-size: auto 100px; margin-right: 20px !important; background-position-y: 25px } } -
That looks awesome, that will definitely work! Only other thing I would need is to be able to use that logo as a link back to the homepage. Would I need to create an html object in the page itself, or can it be done through CSS?
-
No, that cannot be done with CSS. I had thought of moving the logo up there, but we have to use position: absolute; and on responsive width themes, that typically always comes with some headaches. There isn’t really a way to link that image we put up there.
-
-
- The topic ‘Media Queries in Lodestar’ is closed to new replies.
WordPress.com Forums 
