Minimum Pro Theme Add Search in Top Nav

Community Forums Forums General Discussion Minimum Pro Theme Add Search in Top Nav

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  Sridhar Katakam 1 year, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #60833

    Eli Overbey
    Participant
    Post count: 3

    Maybe I am going about this the wrong way (and some simple CSS styling could fix the problem) but I am have the hardest time adding a search bar to the minimum pro theme. (I’ve tried adding another widget area, adding a search function to my nav menu, etc)

    Here is what I am trying to do. Picture Provided. (I’d love to give URL, but… localhost development).
    Search Bar

    So, I go into the widget area, and add my two widgets in ‘Header Right':
    Widget

    When I add that, this happens:
    Search Overflow
    As you can see, the search bar flows into the next line. I know the search bar will overflow onto that line at a smaller screen, but at a normal large screen, it is still there.

    Any thoughts on how to squeeze the search bar beside the custom menu? I’ve tried reducing the menu width and floating it right, but no avail.

    Here is the CSS I am working with:

    /* Title Area
    --------------------------------------------- */
    
    .title-area {
    	float: left;
    	padding: 18px 0;
    	padding: 1.8rem 0;
    	width: 320px;
    }
    
    .header-image .title-area {
    	padding: 0;
    }
    
    .site-title {
    	font-family: 'Roboto', sans-serif;
    	font-size: 24px;
    	font-size: 2.4rem;
    	line-height: 1;
    	margin: 0;
    	text-transform: uppercase;
    }
    
    .site-title a,
    .site-title a:hover {
    	border: none;
    	color: #333;
    }
    
    .site-description {
    	font-size: 36px;
    	font-size: 3.6rem;
    	font-weight: 300;
    	line-height: 1.2;
    	margin: 0;
    	color: #fff;
    }
    
    /* Full width header, no widgets */
    
    .header-full-width .title-area,
    .header-full-width .site-title {
    	width: 100%;
    }
    
    .header-image .site-title a {
    	display: block;
    	text-indent: -9999px;
    }
    
    /* Custom header */
    
    .header-image .title-area {
    	padding: 0;
    }
    
    .header-image .site-title a {
    	height: 60px;
    	display: block;
    	text-indent: -9999px;
    	max-width: 320px;
    }
    
    /* Widget Area
    --------------------------------------------- */
    
    .site-header .widget-area {
    	float: right;
    	text-align: right;
    	width: 800px;
    }
    
    .site-header .search-form {
    	float: right;
    	margin-top: 10px;
    	margin-top: 1rem;
    }

    *I’ve read multiple posts about how you can add a search bar to a Nav – but! This theme relies on you putting the menu bar in ‘Header Right’ (so I am using a custom menu and not the dedicated navigation bars).

    http://local
    #60894

    Sridhar Katakam
    Participant
    Post count: 1068
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.