logo on the left and menu on one line

  • Unknown's avatar
    conciergeriebynj · Member ·

    Hello !

    Almost done with the website !

    I would like to put the logo on the left to let space to the menu being on one line, instead of two. For now the menu is on the left but I can make it on the middle.

    Can you help me wih the logo please ?

    Thanks !

    Laura

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    ninadpatil01 · Member ·

    Hi there!

    You can try the following CSS code :

    a.site-logo-link img {
    max-height: 2em !important;
    }

    This will reduce the height of your logo and menu will appear on line.

    Hope this helps.

    Thanks!

  • Unknown's avatar
    conciergeriebynj · Member ·

    Thanks :) But I have already this CSS code. It change the size, I would like the logo more on the left, without touching the size.

  • Unknown's avatar
    conciergeriebynj · Member ·

    Maybe im not clear :/

  • Unknown's avatar
    3sonsdevelopment · Member ·

    Hi!

    If I’m understanding you, you would like to move the logo further to the left so that the menu will fit onto one line on the right. You’re not looking to change the size of the logo.

    If that’s the case you might try this as a CSS solution:

    
div#header-wrapper {
    max-width: 1240px;
}

    What that will do is allow the content in the header to be a bit wider than the default.

    As the screen size shrinks though, the menu will still wrap a bit since there won’t be as much space available.

    Hope that helps out and congratulations on your site :)

  • Unknown's avatar
    conciergeriebynj · Member ·

    Thank you for your answer :)

    It didnt work. i try with !important and with different PX (lower and upper) and it doesnt really move to the left . It s ok if I can’t move the logo, but I really need the menu on One line :/

    Thank you by the way for the website, i use Elementor its awsome !

  • Unknown's avatar
    3sonsdevelopment · Member ·

    Hello again :)

    The above snippet will only bring the menu items onto one line when the browser window is on the larger side.

    We could also approach this by decreasing the space between the menu items when the browser window is a bit narrower. Since there is only so much space available though, that won’t be enough as things get even smaller.

    So I would suggest making the mobile menu appear at a larger screen size also. We can combine all three into this snippet:

    
		div#header-wrapper {
		    max-width: 1240px;
		}
		
		@media only screen and (max-width: 1180px) {
		
			.masthead .actions .menu li a {
			  padding-left: 5px;
			  padding-right: 5px;
			}
		
		}
		
		@media only screen and (max-width: 1024px) {
		
			.masthead .action-wrapper {
			  -moz-flex-direction: column;
			  -ms-flex-direction: column;
			  -webkit-box-orient: vertical;
			  -webkit-box-direction: normal;
			          flex-direction: column;
			}
			.masthead .branding,
			.masthead .actions {
			  display: block;
			  width: 100%;
			  max-width: none;
			}
			.masthead .branding {
			  padding: 0.7rem 20px;
			  height: auto;
			  text-align: center;
			  float: none;
			  *zoom: 1;
			}
			.masthead .branding:before,
			.masthead .branding:after {
			  content: "";
			  display: table;
			}
			.masthead .branding:after {
			  clear: both;
			}
			.masthead .branding .custom-logo-link,
			.masthead .branding .site-logo-link {
			  display: none;
			}
			.masthead .branding h1.site-title {
			  display: block;
			  float: none;
			  font-size: 26.25px;
			  font-size: 1.75rem;
			  line-height: 2.8rem;
			}
			.masthead .secondary {
			  margin-top: 0.7rem;
			  display: none;
			}
			.masthead .secondary.search-active form,
			.masthead .secondary form {
			  width: 100%;
			  border-radius: 0;
			}
			.masthead .container {
			  padding: 0;
			}
			.masthead .menu-primary {
			  clear: both;
			  padding-left: 20px;
			}
			.masthead .actions .menu {
			  background: #e6e6e6;
			  width: 100%;
			  clear: both;
			}
			.masthead .actions .menu .menu-toggle {
			  display: block;
			  color: #000000;
			}
			.masthead .actions .menu.menu-on ul {
			  display: block;
			}
			.masthead .actions .menu ul {
			  display: none;
			}
			.masthead .actions .menu ul:before,
			.masthead .actions .menu ul:after {
			  display: none;
			}
			.masthead .actions .menu ul ul li.focus > ul,
			.masthead .actions .menu ul ul li:hover > ul {
			  left: auto;
			}
			.masthead .actions .menu li {
			  display: list-item;
			  color: #000000;
			}
			.masthead .actions .menu li ul li a,
			.masthead .actions .menu li li a,
			.masthead .actions .menu li a {
			  padding: 0.35rem 0;
			  color: #000000;
			  background: transparent;
			}
			.masthead .actions .menu li ul li a:focus,
			.masthead .actions .menu li li a:focus,
			.masthead .actions .menu li a:focus,
			.masthead .actions .menu li ul li a:hover,
			.masthead .actions .menu li li a:hover,
			.masthead .actions .menu li a:hover {
			  color: #000000;
			  background: transparent;
			  text-decoration: underline;
			}
			.masthead .actions .menu li ul li a:before,
			.masthead .actions .menu li li a:before,
			.masthead .actions .menu li a:before,
			.masthead .actions .menu li ul li a:after,
			.masthead .actions .menu li li a:after,
			.masthead .actions .menu li a:after {
			  display: none;
			}
			.masthead .actions .menu li.icon a:before {
			  display: inline-block;
			}
			.masthead .actions .menu li ul ul,
			.masthead .actions .menu li ul {
			  background: transparent;
			  position: relative;
			  top: auto;
			  left: auto;
			  -webkit-box-shadow: none;
			          box-shadow: none;
			  width: 100%;
			  margin: 0;
			  padding-left: 20px;
			  list-style-type: square;
			  z-index: 1;
			}
			.masthead .actions .menu li ul ul li,
			.masthead .actions .menu li ul li {
			  display: list-item;
			  border: none;
			  left: auto;
			}
			.masthead .menu-toggle {
			  font-family: 'Open Sans', sans-serif;
			  font-size: 16.5px;
			  font-size: 1.1rem;
			  line-height: 2.8rem;
			  padding: 0 20px;
			}
			.masthead .menu ul.menu-wrap {
			  padding: 0 20px 1.4rem 20px;
			}
			
		}

    If all goes well then the mobile menu should appear when the browser window is 1024 pixels wide instead of the default 782. Above that hopefully it will decrease the space between the menu items so they can fit more on a line.

  • Unknown's avatar
    conciergeriebynj · Member ·

    Thank you very much ! it looks much better !! I didnt know It needed a css code so long ^^

    Have a good evening thanks again,

  • Unknown's avatar
    3sonsdevelopment · Member ·

    Happy to help out…have a great evening too 😀

  • The topic ‘logo on the left and menu on one line’ is closed to new replies.