[Resolved] Adjusting Nav Bar Height (No Merge) best practice | Changing dropdown fonts size

Home Forums Support Adjusting Nav Bar Height (No Merge) best practice | Changing dropdown fonts size

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1052730
    Krystian

    Hello guys!

    I’m testing Split theme and wanted to know what is best practice to reduce Nav Bar height.
    I can do it in customizer using

    Layout>Primary Nav>Menu Item Height
    or
    Layout>Header>Header Padding (top,bottom)

    I need to adjust both settings at the same time to get the expected lower height. But I can get the same results using different combination of two. For example (made up)
    1. Menu Height 40, Padding 0, 0
    2. Menu Height 20 Padding 10, 10.
    Is there a best practice regarding that? Should Padding have at least some value, or one be always bigger, or something, or it doesn’t matter at all?

    Second question, how can I adjust font size of dropdown menu? I’m changing Nav Bar font size with no effect on dropdown menus.

    Third, how can I adjust Nav Bar position to look like on GP site? I’d like to align it to right. I’ve deleted logo, separator, and tried different options in Layouts to no avail. Menu stays in the same place, only blue wordpress button “Click to edit” moves.

    #1052801
    David
    Staff
    Customer Support

    Hi there,

    1. with the nav inside the header then yes you need to adjust both to change the height.

    2. I provide some CSS for that here:

    https://generatepress.com/forums/topic/change-submenu-font-size/#post-998952

    3. GP uses:

    1. Customizer > Layout > Header – Full Width.
    2. .. Layout > Primary Navigation – Location: inside header, alignment: right.

    #1053016
    Krystian

    Thank you, CSS works like a charm.

    I don’t see any changes in Nav Bar position, no matter what I try.
    Float right / float left – no difference, menu stays in the same position just blue “edit” button in customizer moves.
    Above/below header (it moves up/down) but then alingment left/center/right does nothing.
    Changing Navigation position in Site Hero element to Float Right/Left also doesn’t work (other positions like below header does).
    Separator is deleted, so it’s not that.

    I’ve checked in other theme (mellow) and everything works there.

    #1053056
    David
    Staff
    Customer Support

    You said originally you were using the Split site ?
    If so then in Customizer > Additional CSS – you should see the CSS that the Site imported. If you don’t want the Split header then you can remove everthing apart from the rules beginning with .button

    #1053077
    Krystian

    Yes, it’s Split.
    I like the header very much, just want to align the Navigation on the right side like on this GP support site.

    Ok, I’ve deleted almost everything – it works – now it can be adjusted, but could you point me to a specific CSS entry that is responsible for that alignment, so I can edit that? I do not want to delete it all, sice I do not even know what it’s doing

    #1053087
    David
    Staff
    Customer Support

    Can you link me to the site ?

    #1053097
    Krystian

    Hello, yes of course.
    My site is energiazycia.com
    I’ve restored original CSS to site.

    I did edit my previous post.
    I’ve deleted all the CSS that wasn’t button, and now it works, I can change the alignment.

    But could you point me to a specific CSS entry that is responsible for that alignment so I can edit just that? I do not want to delete it all, since I do not even know what it’s doing, and there was stuff regarding mobile headers and such.

    It works if you just delete two entries cited below. I’ve tried to change float:none to float:right with no effect.

    .inside-header {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-align: center;
    	    -ms-flex-align: center;
    	        align-items: center;
    }
    

    and

    #site-navigation {
    	float: none;
    	width: 100%;
    }
    
    .main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    }
    
    #1053400
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    To make it so the header/navigation is aligned normally, try removing this CSS:

    .inside-header {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-align: center;
    	    -ms-flex-align: center;
    	        align-items: center;
    }
    
    .header-widget {
    	order: 10;
    	overflow: visible;
    }
    
    .nav-float-right .header-widget {
    	top: auto;
    }
    
    .nav-float-right .header-widget .widget {
    	padding-bottom: 0;
    }
    
    .site-branding,
    .site-logo {
    	position: absolute;
    	left: 50%;
    	-webkit-transform: translateX(-50%);
    	        transform: translateX(-50%);
    	z-index: 200;
    }
    
    #mobile-header .mobile-bar-items {
    	-webkit-box-ordinal-group: 5;
    	-ms-flex-order: 4;
    	order: 4;
    	margin-left: auto;
    }
    
    #site-navigation {
    	float: none;
    	width: 100%;
    }
    
    .main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    }
    
    .main-navigation .menu-item-separator {
    	-webkit-box-flex: 1;
    	    -ms-flex-positive: 1;
    	        flex-grow: 1;
    }
    
    .main-navigation .menu-item-separator a {
    	font-size: 0;
    	background: transparent !important;
    }
    
    .slideout-navigation .menu-item-separator,
    .main-navigation.toggled .menu-item-separator{
    	display: none !important;
    }
    #1053406
    Krystian

    Thanks both of you πŸ™‚

    #1054072
    Tom
    Lead Developer
    Lead Developer
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.