Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter bayu-angora

    (@bayu-angora)

    Here is my custom CSS.

    #overflow-container
    {margin-left: 5%; margin-right: 5%;}

    #title-info
    {margin-left: 5%;}

    #menu-primary ul.social-media-icons
    {margin-right: 5%;}

    @media all and (min-height: 600px){
    .site-header
    {position: fixed; width: 100%; z-index: 9999;}
    .overflow-container
    {padding-top: 60px;}
    }

    @media (max-width: 800px){
    #logo
    {margin-right: 36px;}
    #toggle-navigation i.fa-bars
    {margin-left: 36px;}
    }

    .menu-primary
    {font-family: roboto slab; font-size: 18px; font-weight: 600;}

    #site-description
    {display: none;}

    .social-media-icons i
    {font-size: 24px;}

    .entry-title, .excerpt-title
    {font-size: 24px; font-weight: bold;}

    .more-link
    {color: #ff0000; font-weight: 600;}

    .pagination
    {color: #ff0000; font-weight: 600;}

    .entry-categories p, .entry-tags p
    {font-size: 16px;}

    a:link, a:visited, a:hover, a:active
    {text-decoration: none;}

    #sidebar-primary section.widget .tagcloud
    {line-height:28px;
    text-align: right;
    padding-bottom: 24px;}

    I use margin left and right for overflow container
    because I want the size smaller and not too width.

    Please tell me if there any better code
    to make my site look smaller and keep responsive.

    Well, it seems there is no space to keep main menu and social menu on the same line.

    Do you want it lo look something like:
    https://pasteboard.co/1a9hi0Rd.jpg

    Thread Starter bayu-angora

    (@bayu-angora)

    Hello, Bensita.
    Thanks for response.

    No, I mean I don’t want my menu going to more than 1 line.

    I just want to keep my menu as 1 line (span menu) on standard view.
    -> https://ctrlv.cz/wxIA

    Or just going to wrap (toggle menu) when they are on mobile view.
    -> https://ctrlv.cz/n5DV

    So, they are no chance to error or going to more than 1 line.
    -> https://ctrlv.cz/U7QL

    I also try to modify my code like this.
    But still no fix when I reach between 800px to 1030px.

    #overflow-container
    {width: 80%; margin-left: auto; margin-right: auto;}

    #title-info
    {margin-left: 10%;}

    #menu-primary ul.social-media-icons
    {margin-right: 10%;}

    @media all and (min-height: 600px){

    .site-header
    {position: fixed; width: 100%; z-index: 9999;}

    .overflow-container
    {padding-top: 60px;}}

    @media (max-width: 800px){

    #logo
    {margin-right: 65px;}

    #toggle-navigation i.fa-bars
    {margin-left: 65px;}}

    .menu-primary
    {font-family: roboto slab; font-size: 18px; font-weight: 600;}

    #site-description
    {display: none;}

    .social-media-icons i
    {font-size: 24px;}

    .entry-title, .excerpt-title
    {font-size: 24px; font-weight: bold;}

    .more-link
    {color: #ff0000; font-weight: 600;}

    .pagination
    {color: #ff0000; font-weight: 600;}

    .entry-categories p, .entry-tags p
    {font-size: 16px;}

    a:link, a:visited, a:hover, a:active
    {text-decoration: none;}

    #sidebar-primary section.widget .tagcloud
    {line-height:28px;
    text-align: right;
    padding-bottom: 24px;}

    .site-footer
    {display: none;}

    I want my menu just going to wrap (toggle) before going to 2 lines.

    Theme Author Ben Sibley

    (@bensibley)

    Hi Bayu,

    With the space available, the social icons can’t fit on the same line as the menu items at those screen sizes. The easiest solution is to temporarily hide the icons with the following CSS for the small range of screen sizes they don’t fit on:

    @media all and (min-width: 800px) and (max-width: 970px) {
    
      .social-media-icons {
        display: none;
      }
    }
    Thread Starter bayu-angora

    (@bayu-angora)

    Thanks for support, Ben. It works.
    But I will try to switch to another theme first for a while.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Error Header Menu’ is closed to new replies.