Home Forums Basel support forum Main Nav looks buggy between 1.024px and 1.400px

Main Nav looks buggy between 1.024px and 1.400px

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #5996

    holgerpleick
    Participant

    Hi there.

    The main nav looks good at screens with a width of more than 1.400px and also looks good below the 1.024px breakpoint when it change in to mobile nav. But between 1.024px und 1.400px the main nav appears buggy.

    What can I do to have a consitent good looking main nav?

    Many thanks

    Holger

    #5997

    Artem Temos
    Keymaster

    Hello,

    Thank you so much for using our theme and contacting our support center.

    Yes, we see that your menu items width is too large to fit a free space in the header. Here is what you can do to make the space bigger.

    1. Decrease right column width option in Theme Settings -> Header -> Header layout

    2. Disable “Login / Register” links in Theme Settings -> Shop -> My account

    3. Decrease free space between menu items by adding this code snippet to the Custom CSS area in Theme Settings

    .main-nav .menu>li>a {
        padding-left: 5px;
        padding-right: 5px;
    }

    Hope this will help.

    Kind Regards
    Xtemos

    #5998

    holgerpleick
    Participant

    Thanks, that works.

    How can I put the my-account Login to another place?

    Holger

    #6001

    Artem Temos
    Keymaster

    Hi,

    Currently, header right columns is the only one place for login/registration links. If you want you can turn it on and we will send you a CSS snippet to make in the form for an icon without text to make it smaller.

    #6002

    holgerpleick
    Participant

    Hi,

    yes, good idea. Please send me the CSS.

    Many Thanks

    Holger

    #6008

    Artem Temos
    Keymaster

    Here is a code snippet for you. Add this to the Custom CSS section in Theme Settings

    .right-column .header-links li a {
        font-size:0;
        font-style: normal;
        display: block;
        padding: 0;
    }
    .right-column .header-links li a:after {
        content:none;
    }
    .right-column .header-links ul {
        line-height:0;
    }
    .right-column .header-links li a:before {
        content: "\e005";
      display: inline-block;
        font-size: 20px;
        vertical-align: middle;
        text-align:center;
        line-height: 30px;
        height: 30px;
        width: 30px;
        font-family: Simple-Line-Icons;
    }
    #6009

    adamrippl
    Participant

    Thank you!

    #6017

    Artem Temos
    Keymaster

    You are welcome, we are always happy to help you, write us when you have any difficulties or issues with our theme.

    And we would be glad if you will rate our theme with 5 stars on Theme Forest in case you are satisfied with our theme and customer service http://themeforest.net/downloads

    Thank you in advance 🙂

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