Jump to content


Photo
- - - - -

CSS by screen size?

fixed navigation fixnav responsive css positioning

Best Answer Rob , 04 June 2013 - 02:23 PM

Try this in place of your code:

 
.navbar .navline {
    margin-left: 10px;
    position: absolute;
}
Go to the full post


  • Please log in to reply
6 replies to this topic

#1 wpclincoln

wpclincoln

    Member

  • Members

  • 14 posts
  • LocationLincoln, NE
  • Framework Version:DMS
  • Country: Country Flag

Posted 02 June 2013 - 06:10 PM

Please Login or Register to see this Hidden Content

I'm developing I am using this snippet of CSS to adjust the position of text in my fixednav.

Please Login or Register to see this Hidden Content

It works perfectly on a desktop sized browser window. However, when the window drops in size and reflows for mobile viewing, the menu items begin off to the left of the screen. About 29px to the left, I'd guess. ;)

 

The question is - I don't know much about responsive design. Is there a way to specify that this piece of custom CSS should only apply ABOVE a certain page width?

 

Thanks for ideas!

 

-CP



#2 wpclincoln

wpclincoln

    Member

  • Members

  • 14 posts
  • LocationLincoln, NE
  • Framework Version:DMS
  • Country: Country Flag

Posted 02 June 2013 - 06:39 PM

I just tried it on an actual mobile phone (Android) and it looked fine once. but not on every page. I don't know why it would behave differently from page to page, but it seems to. Strange.



#3 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 04 June 2013 - 01:45 PM

Hi,

 

I don't see any CSS elements in our code for .navline and have never seen anyone use the operand "left:"

 

Where did those come from?



#4 wpclincoln

wpclincoln

    Member

  • Members

  • 14 posts
  • LocationLincoln, NE
  • Framework Version:DMS
  • Country: Country Flag

Posted 04 June 2013 - 02:03 PM

@

Please Login or Register to see this Hidden Content

- HA! I just imagineered them up, I guess. I wanted the first text in my fixed nav to move to the left by 29 pixels to line up (vertically) with the logo in my branding section below it. There is an empty spot to begin the fixed nav (where a logo would go, I believe, but I have that turned off.) I took a shot at positioning it that way and it worked. On full sized displays, at least.

 

If there is a more elegant way to accomplish that, I'm all ears! ;) I'm not a programmer by trade, I just hack around at stuff until it looks the way I like. 



#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 04 June 2013 - 02:23 PM   Best Answer

Try this in place of your code:

Please Login or Register to see this Hidden Content



#6 wpclincoln

wpclincoln

    Member

  • Members

  • 14 posts
  • LocationLincoln, NE
  • Framework Version:DMS
  • Country: Country Flag

Posted 04 June 2013 - 02:38 PM

Bingo-bango-bongo! Thanks @

Please Login or Register to see this Hidden Content

!



#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 04 June 2013 - 03:42 PM

You're welcome!







Also tagged with one or more of these keywords: fixed navigation, fixnav, responsive, css, positioning