Primary menu on right hand side

Home Forums Icelander Primary menu on right hand side

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #18205

    Luisa
    Participant

    Primary menu on right hand side

    Resolved

    Hi,
    I’d like to have only one primary menu which is positioned on the right hand side of the inner header. Via menu settings I set, that there is no menu chosen on the secondary position and on the social links position (see screenshot).
    I tried with the following css code in my childtheme stylesheet, but it didn’t work

    nav#site-navigation.main-navigation {
        float: right !important;
    }

    Up til now I have no other adaptation in my childtheme CSS. Can you give me a hint about how to move the primary menu to the right hand side?

    Thanks a lot for offering an accessibility ready theme

    Luisa

    #18207

    Oliver Juhas
    Keymaster

    Hi Luisa,

    Glad you put the theme to good use :)

    You can actually position the primary menu to right using this custom CSS (it will work now even if you set the social links menu):

    @media only screen and (min-width: 80em) {
    	.main-navigation {
    		margin-left: auto;
    	}
    }
    
    .site-header-content .main-navigation + .social-links {
    	margin-left: 0;
    }

    Best regards,

    Oliver Juhas
    WebMan Design

    #18208

    Luisa
    Participant

    Wow, that was a fast reply!!

    Thank you :-)

    Can I ask two more questions combined with this topic
    a) A technical one: how do I also move the red menu toggle button on bigger mobile devices to the right hand side
    b) For understanding (and explaining to my customer): on even smaller devices you move the menu toggle button to the bottom of the website. Why? I first thought the menu would have disappeared completely and think this could happen to users, too?

    Kind regards

    Luisa

    #18210

    Oliver Juhas
    Keymaster

    Hi Luisa,

    1. Again custom CSS:
      @media only screen and (max-width: 54.9375em) and (min-width: 42em) {
      	.main-navigation {
      		margin-left: auto;
      	}
      }
    2. I understand most of users are used to reach out to top of the screens for navigation even in mobiles. However, I strive for better usability and with mobile navigation in the bottom you can reach it very easily, even when handling the phone with one hand only (which seems to be most used way).
      It is actually beneficial for all of these handling scenarios (image from uxmatters.com):

    Best regards,

    Oliver Juhas
    WebMan Design

    #18211

    Luisa
    Participant

    Thank you for the technical solution and the background information. I will read it carefully.

    Kind regards

    Luisa

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.