9 {{ upvoteCount | shortNum }}
9 {{ upvoteCount | shortNum }}

any css advice?

by Arcsn
7 replies
Hi guys,

i went trough my code and possibly I've found the "problem". can anyone give me a tip how to overcome?

my code for the two menus is following:
HTML Code:
<header>
    <nav id="navigation"> <a class="menu_button" onClick="toggleNav(); return false;"><i class="fa fa-globe fa-2x"></i></a>
      <ul id="navigation_list" role="navigation">
        <li><a href=#>item</a></li>
        <li><a href=#>item</a></li>
        <li><a href=#>item</a></li>
        <li><a href=#>item</a></li>
        <li><a href=#>item</a></li>
        <li><a href=#>item</a></li>
      </ul>
    </nav>
    <a class="to_nav" href="#primary_nav"> <i class="fa fa-bars fa-2x"></i> </a> 
	</header>
and then I've got some simple java that drops down my "navigation" menu. (and works )

my "primary_nav" is at the bottom of the page and I use pure css code to access it.

now the problem is: i can't display my menu icons inline (globe and bars) in mobile version of my site (I'm creating responsive website).

I think the cause is that I have "nav" on the one hand and no-nav on the other.

any clues on how to fix it?
#advice #css
  • Profile picture of the author webcosmo
    Hi, there are a lot of possibilities, can you provide any live example of that?
    Signature


    {{ DiscussionBoard.errors[10253220].message }}
  • Profile picture of the author Sowkat Hossain
    You can try display:inline-block to fix it, or you have to fix it in media query

    Thanks
    {{ DiscussionBoard.errors[10253223].message }}
    • Profile picture of the author arojilla
      As Sowkat Hossain said, apply inline-block to the elements that are not displaying that way. If you are not positioning your ul and li, or you are not styling them in a way that will force the position of their links, it can be as simple as:

      Code:
      #navigation a, a.to_nav {display:inline-block;}
      But your main problem may be that both your first and last links are being forced up and down by the ul in the first place and by the ul and/or nav in the second, so apply the style to the them too:

      Code:
      #navigation, #navigation a, #navigation ul, a.to_nav {display:inline-block;}
      If the list elements are getting in the way, include them too:

      Code:
      #navigation, #navigation a, #navigation ul, #navigation li, a.to_nav {display:inline-block;}
      It's hard to give you a more precise answer without knowing what you are styling and how, but the premise is this, apply inline-block to all elements that force others to not show that way.

      BTW, you can also target those elements from the header tag, like:

      Code:
      header a {display:inline-block;}
      This example will affect all links inside header. Just note that some old browsers don't recognize new tags in HTML5 like header, footer or nav, and that you should apply them display:block by default. Then, like in your case, you may need to change a given nav its display properties.

      Just a warning: inline-block elements have a blank space between them (as they should), and the easiest way to remove those spaces is to remove any space in your code:

      Code:
      <header>
    <nav id="navigation"> <a class="menu_button" onClick="toggleNav(); return false;"><i class="fa fa-globe fa-2x"></i></a><ul id="navigation_list" role="navigation"><li><a href=#>item</a></li><li><a href=#>item</a></li><li><a href=#>item</a></li><li><a href=#>item</a></li><li><a href=#>item</a></li><li><a href=#>item</a></li></ul></nav><a class="to_nav" href="#primary_nav"> <i class="fa fa-bars fa-2x"></i> </a>
	</header>
      When you are trying to align inline-block elements to the pixel this spaces can drive you crazy the first times!

      Removing spaces in code makes it harder to read/edit, but the less spaces/tabs in your code, the more bits you save and the faster the page loads. One thing for the other.

      Another option would be to float elements, but that can have more drawbacks. Or what I do, relative/absolute positioning of every element, but it can be harder to do properly, specially in responsive designs.
      Signature

      [...]

      {{ DiscussionBoard.errors[10253320].message }}
      • Profile picture of the author Sowkat Hossain
        Originally Posted by arojilla View Post

        As Sowkat Hossain said, apply inline-block to the elements that are not displaying that way. If you are not positioning your ul and li, or you are not styling them in a way that will force the position of their links, it can be as simple as:

        Code:
        #navigation a, a.to_nav {display:inline-block;}
        But your main problem may be that both your first and last links are being forced up and down by the ul in the first place and by the ul and/or nav in the second, so apply the style to the them too:

        Code:
        #navigation, #navigation a, #navigation ul, a.to_nav {display:inline-block;}
        If the list elements are getting in the way, include them too:

        Code:
        #navigation, #navigation a, #navigation ul, #navigation li, a.to_nav {display:inline-block;}
        It's hard to give you a more precise answer without knowing what you are styling and how, but the premise is this, apply inline-block to all elements that force others to not show that way.

        BTW, you can also target those elements from the header tag, like:

        Code:
        header a {display:inline-block;}
        This example will affect all links inside header. Just note that some old browsers don't recognize new tags in HTML5 like header, footer or nav, and that you should apply them display:block by default. Then, like in your case, you may need to change a given nav its display properties.

        Just a warning: inline-block elements have a blank space between them (as they should), and the easiest way to remove those spaces is to remove any space in your code:

        Code:
        <header>
    <nav id="navigation"> <a class="menu_button" onClick="toggleNav(); return false;"><i class="fa fa-globe fa-2x"></i></a><ul id="navigation_list" role="navigation"><li><a href=#>item</a></li><li><a href=#>item</a></li><li><a href=#>item</a></li><li><a href=#>item</a></li><li><a href=#>item</a></li><li><a href=#>item</a></li></ul></nav><a class="to_nav" href="#primary_nav"> <i class="fa fa-bars fa-2x"></i> </a>
    </header>
        When you are trying to align inline-block elements to the pixel this spaces can drive you crazy the first times!

        Removing spaces in code makes it harder to read/edit, but the less spaces/tabs in your code, the more bits you save and the faster the page loads. One thing for the other.

        Another option would be to float elements, but that can have more drawbacks. Or what I do, relative/absolute positioning of every element, but it can be harder to do properly, specially in responsive designs.
        Hey,
        arojilla
        Sowkat Hossain did not say any way, he only said the property value. If you thought that your answer is the right you should satisfy with yourself not to refer anyone. It is not politeness.
        {{ DiscussionBoard.errors[10254646].message }}
        • Profile picture of the author arojilla
          Originally Posted by Sowkat Hossain View Post

          Hey,
          arojilla
          Sowkat Hossain did not say any way, he only said the property value. If you thought that your answer is the right you should satisfy with yourself not to refer anyone. It is not politeness.
          wut?
          Signature

          [...]

          {{ DiscussionBoard.errors[10254932].message }}
  • Profile picture of the author totalprocessing.net
    you may want to check your @media queries to make sure you are not display:none the icons container at whatever breakpoint
    Signature
    Premium WooCommerce & WordPress Plugins $10/ea. or FREE With Membership. PluginForage.com
    {{ DiscussionBoard.errors[10253943].message }}
  • Profile picture of the author Arcsn
    thanks guys I solved the problem
    {{ DiscussionBoard.errors[10260531].message }}

Trending Topics