Forums

navigation menu (neat theme)

Permalink
Can anyone please tell me what I did wrong here? I wanted my main navigation on the bottom right so I added this code as a custom CSS:

.navbar-right {
position: absolute;
bottom: 0;
right: 7px;
}

It works fine on a computer browser but when I view my menu on a phone it will float to the top right and sit on top of the logo instead of opening downwards bellow the logo.
Thanks in advance!
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi MaxGT,

"I wanted my main navigation on the bottom right so I added this code as a custom CSS:"

Can you take a screenshot and highlight where you want the navigation to be displayed, please.
MaxGT replied on at Permalink Reply
Thanks for replying.You can see on the first screenshot the result I got with the custom code above. The menu sits at the bottom right as desired but when viewing in mobile mode it floats on the top right.
siton replied on at Permalink Reply
siton
Absolute position "break the HTML original flow" so on mobile without space the nav UL is on top of your site logo (it's still bottom 0 and right 7px) and you get this "effect"
https://www.w3schools.com/css/tryit.asp?filename=trycss_zindex...

You find endless tutorials and videos on youtube/google about CSS position (google it)
https://www.youtube.com/watch?v=msAglAvefk4...
https://www.youtube.com/watch?v=-vo0HzNHL3U...

Anyway, you can use media Q and "use" CSS - position: static" (default) on mobile screens. So The logo will be on top and then the NAV

Try to add this code:
/* less than 768px width is the value when your navbar collapse - in this point you dont want the absolute position */
@media (max-width: 767px){
 .navbar-right {
    position: static;
}
}

In general, you can set "offset" to your navbar also with relative value:
.navbar-right {
position: relative;
top: 39px;
}
----
Also, add media Q for the size of the logo (it's huge on tablet breakpoint before you get the collapse menu - ---> the UL also is on top of the logo)
MaxGT replied on at Permalink Reply
@Siton thanks for having a look at it. The @media didn't seem to have any effect when I tried it. I had tried relative positioning before as well but the mobile menu gets a huge space inserted above it so that also didn't work.
Gondwana replied on at Permalink Best Answer Reply
Gondwana
I'm not even sure this works reliably on non-mobile windows. Try narrowing your desktop browser window, and you'll see that the menu happily moves on top of the logo. I think you need to flesh out your thoughts more fully. A theme view template change (php) may be required to keep the areas separate.
MaxGT replied on at Permalink Reply
@Gonwana you are probably right. I may have to edit the template and insert another div or move the logo above the main nav or something like that. I'm not a savvy coder so if you got a suggestion I'm all ears, I'm pasting the code sample bellow. Thanks!

<div class="primary-nav">
    <div class="container">
      <div class="row">
      <div class="col-sm-12">
      <nav class="navbar" id="main-nav">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <div class="site-name">
         <?php
Viewing 15 lines of 45 lines. View entire code block.