• Dani

    (@danicasati)


    Hi. I can modify height of glass icon in desktop using this CSS code:

    .search-toggle-wrapper .desktop-search-toggle .toggle-inner{
    height:20px;
    }

    This change is for align vertically glass icon with menu items.

    How can I modify in order to change height of glass menu in mobile? Is it possible to move icon to another side of the menu?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Rough Pixels

    (@roughpixels)

    I’m not quite sure what kind of a look/layout you are wanting, but if I understand correctly, you want to manage the height of that container when in mobile view?

    The theme has this:

    .toggle-inner {
        display: flex;
        justify-content: center;
        height: 2rem;
    
        position: relative;
    }

    You can override the height to your preference for mobile devices. This would do it with a 20px height:

    .toggle-inner {
        height: 20px;
    }

    Hopefully that is what you were looking for?

    Best Regards,
    Andre

    Thread Starter Dani

    (@danicasati)

    It works, but three dots menu is doing down too.

    Is it possible to move only glass icon?

    Theme Author Rough Pixels

    (@roughpixels)

    Move the search? It’s possible. Is this what you are thinking about for mobile view?

    Screenshot Here

    Thread Starter Dani

    (@danicasati)

    Yes, like the screenshot.

    But more importante feature for me is to move to down mobile search icon, in order to get icon aligned with the menu.

    Theme Author Rough Pixels

    (@roughpixels)

    To align vertically (everything), you can do this:

    .toggle-text {
        display: none;
    }
    .toggle-inner {   
        align-items: center;
    }
    .nav-toggle .toggle-inner {
        padding-top: 0;
    }

    What that bit of code does, is remove the “text” labels and then vertically aligns everything to be lined up in the middle; for both mobile and desktop views. See this screenshot.

    Regarding the changing of the layout where the title moves to the left and the other items move to the right, you could do this CSS code in the Additional CSS tab of the customizer. This “might” work for you.

    
    .header-titles-wrapper {
        justify-content: start;
    }
    
    .search-toggle,
    .nav-toggle {
        position: relative;
    }
    
    button.toggle.nav-toggle.mobile-nav-toggle {
        order: 2;
    	margin-left: auto;
    }
    button.toggle.search-toggle.mobile-search-toggle {
        order: 3;
    }
    
    @media (min-width: 1000px) {
    	.header-titles {
    		flex-direction: column;
    	}
    	.header-titles .site-description {
    		margin: 0.25rem 0 0;
    	}
    }

    Basically what that code does is change the structure and re-orders it where the title is 1, the navigation is in the 2 spot, and then the search is in the 3 spot.

    The last code part for min-width (which is optional) will move the site tagline to sit below the site title in desktop view.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Height of glass icon in mobile’ is closed to new replies.