Jump to content


Photo
- - - - -

aligning fixed navbar text to middle

custom CSS

Best Answer Danny , 26 January 2014 - 12:24 PM

Hi,

 

Try Adding the following to your custom CSS:

 

#menu-main-navigation-1 {
float: none;
text-align: center;
}
 
#menu-main-navigation-1 li {
display: inline-block;
float: none;
}
 
It may not look center, but it actually is center of your NavBar, the issue you will have is that you have an image in another section aligned next to it. Here is what it would look like without the section to add your image being there and the NavBar being full width i.e. 12/12.
 
 
 
So if you do not like the look with the code I have provided you will need to do one of two things:
 
1. Reposition the image so that it is below or above the Navbar or use the Fixed NavBar option instead and upload your logo to the Fixed Navbar.
2. Keep your layout as it is and use custom CSS to reposition your menu so that it looks center in accordance to your logo and Navbar section.
 
Please bear in mind that we do not provide extensive CSS support.
Go to the full post


  • Please log in to reply
3 replies to this topic

#1 LAMF

LAMF

    Newbie

  • Members

  • 7 posts
  • Framework Version:Pro
  • Country: Country Flag

Posted 21 January 2014 - 10:04 PM

Help!

 

I'm trying to create a larger format menu, and it looks silly to have the text top-aligned in my larger fixed navbar. How do I center it? I've tried a couple things but I'm stuck.

 

I'm using this CSS so far: 

.navbar .navline {
  font-size: 1.5em;
}
 
.navbar .plbrand img {
    max-height: 74px;
}
.navbar {
    height: 5em !important;
}
 
and the website URL is lakesareamusic.org
 
Thank you!

  • Tibag3wv likes this

#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 15702 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 26 January 2014 - 12:24 PM   Best Answer

Hi,

 

Try Adding the following to your custom CSS:

 

#menu-main-navigation-1 {
float: none;
text-align: center;
}
 
#menu-main-navigation-1 li {
display: inline-block;
float: none;
}
 
It may not look center, but it actually is center of your NavBar, the issue you will have is that you have an image in another section aligned next to it. Here is what it would look like without the section to add your image being there and the NavBar being full width i.e. 12/12.
 
 
 
So if you do not like the look with the code I have provided you will need to do one of two things:
 
1. Reposition the image so that it is below or above the Navbar or use the Fixed NavBar option instead and upload your logo to the Fixed Navbar.
2. Keep your layout as it is and use custom CSS to reposition your menu so that it looks center in accordance to your logo and Navbar section.
 
Please bear in mind that we do not provide extensive CSS support.

  • LAMF likes this

#3 LAMF

LAMF

    Newbie

  • Members

  • 7 posts
  • Framework Version:Pro
  • Country: Country Flag

Posted 06 February 2014 - 06:27 PM

Thank you for your help! I really appreciate it. 



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 06 February 2014 - 10:59 PM

We're glad you've managed to resolve, thank you for updating the thread.







Also tagged with one or more of these keywords: custom CSS