Drop down menu items in one line

Support Area Forums Bottega Drop down menu items in one line

Viewing 5 posts - 1 through 5 (of 5 total)
URL to the page in question: http://cb1art.co.uk/
  • Author
    Posts
  • #33132

    Hello Bill,

    Is it possible to have the title of the pages in the drop down menu in one single line? Of course the shorter ones are fine, however the longer ones might look better if they are not divided.

    Many thanks,

    Krisztian

    #33137
    Bill Robbins
    Moderator

    Good Morning Krisztian,

    You’re welcome to make those wider. Here’s how:

    1. Go to your theme options page and choose the Advanced tab.
    2. Scroll down to the Custom CSS box and add this:
      
      #navigation .menu li ul {
      	width: 250px;
      }
      
      #navigation .menu li ul li,
      #navigation .menu li ul li a,
      #navigation .menu li ul li a:visited {
      	width: 100%;
      }
      
      #navigation ul.menu li li:hover ul,
      #navigation ul.menu li li.sfHover ul {
      	width: 250px;
      	left:  290px;
      }
      
    3. Update your settings.

    See if that doesn’t help them all fit on one row.

    Let me know if you run into any questions or trouble,
    Bill

    #33153

    Thanks Bill! It works.

    Just because I am already here, what could we write in the CSS to make the dropdown menu drop down in the middle, not on the right. It’s OK on a computer, however on a phone quite a lot of the text is cut off.

    Many thanks,

    Krisztian

    #33157
    Bill Robbins
    Moderator

    You’re welcome to add this to your Custom CSS too:

    
    @media only screen and (max-width: 767px) {
    	
    	#navigation .menu li.sfHover ul { 
    		left: -50%; 
    	}
    	
    }
    

    You could also try a plugin like tinynav for that too.

    #33161

    There is magic for everything!

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Drop down menu items in one line’ is closed to new replies.